动画
1、关键帧:
(1)表示符keyframs:
(2)语法结构(0%-100%)
@keyframsNAME{0%{CSS样式{
color:red;
}
}10%{CSS样式{
}
}
}
2、animation与transition:
不同点,动画不用出发;
相同点:都可以通过时间改变css样式属性
3、常用属性;
animaton-name:给动画起个名称;
animaton-duration:设置动画持续周期;
animaton-timing-function:
设置速率:
1,ease 逐渐变慢
2,linear 匀速运动
3,ease-in 加速
4,ease-out 减速
5,ease-in-out 先加速后减速
6,cubic-bezier 贝塞尔曲线 自定义时间曲线
(x1,y1,x2,y2)四个值两个点【0-1】
animation-delay:延迟。
animaiton-iteration-count:动画执行次数:默认一次,infinite(无限大)
animation-play-state:
用来控制动画播放状态;
running(启动)和paused(暂停);
animation-direction:播放方向