关于动画的基础属性:
动画结束后的状态 是否保留动画效果
animation-fill-mode: forwards;
无限次播放
animation-iteration-count:infinite;
动画延时
animation-delay:1s;
动画暂停
animation-play-state: paused;
动画反方向运动
animation-direction: alternate;
动画线性匀速执行
animation-timing-function: linear;
动画相比过渡可以控制更多细节,可以将一个动画拆成多个步骤
这里的比例划分随意。在这以三部分划分
@keyframes animation名{
0%{
宽高颜色背景啊...要改变的属性;
}
50%{
同上
}
100%{
同上
}
}
当然也可以分别设置动画过度要改变的属性执行时间
transition: height 2s, width 0.5s;
------------------------------------------------------------------------------------------------------------------------------------------------