制作动画分两步:
1.先定义好动画;
2.再使用(调用)该动画;
和创建一个类class,然后再调用这个类class是一样的道理。
用@keyframes来定义动画,例如:
/*move就是创建的动画名称*/
@keyframes move {
0% {
width: 100px;
}
50% {
/*先向X轴移动500像素*/
transform: translate(500px,0);
}
100% {
/*再向Y轴移动500像素*/
transform: translate(500px,500px);
}
}
@keyframes动画的理解:
1.0%是动画的开始,100%是动画的完成,这样的规则就是动画序列;
2.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果;
3.可以改变任意多的样式任意多的次数;
4.用百分比来规定变化发生的时间,或用关键词“from”和“to”,等同于0%和100%。
@keyframes动画的使用(调用):
元素使用定义好的动画:
div {
width: 100px;
height: 100px;
background-color: pink;
/*调用定义好的动画*/
animation-name: move;
/*动画在多长时间完成*/
animation-duration: 3s;
}
animation-name和animation-duration必须要有,不然无法显示出动画效果。
动画常用的属性:
属性 | 描述 |
---|---|
@keyframes | 规定动画/创建动画 |
animation | 所有动画属性的简写属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画的名称 |
animation-duration | 规定动画完成所花费的时间,默认是0,单位是秒或毫秒 |
animation-timing-function | 规定动画的速度曲线,默认是“ease”,匀速是"linear" |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite无限次 |
animation-direction | 规定动画是否在下一周期逆向播放,默认是normal,不逆向播放,alternate逆向播放 |
animation-play-state | 规定动画是否正在运行或暂停,默认是running运行,还有pauesd暂停 |
animation-fill-mode | 规定动画结束后的状态,保持forwards和回到初始状态backwards |
animation-timing-function速度曲线细节
linear:动画从头到尾的速度是相同的,匀速;
ease:默认是ease,动画以低速开始,然后加快,在结束前变慢;
ease-in:动画以低速开始;
ease-out:动画以低速结束;
ease-in-out:动画以低速开始和结束;
steps():指定了时间函数中的间隔数量(步长,这个动画从头做到尾需要多少步能完成)