MDN-animation文档
animation: [name] [duration] [timing-function] [delay] [iteration-cont] [direction] [fill-mode] [play-state]
初始值
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running
/*定义动画规则,声明规则名*/
@keyframes test {
0% {
margin-left: 0px;
}
100% {
margin-left: 200px;
}
}
p:hover {
animation-name: test; 动画名称 [name]
animation-duration: 1s; 规定动画完成一个周期所花费的秒或毫秒 [duration]
animation-timing-function: linear; 规定动画的速度曲线 [timing-function]
animation-delay: 0; 规定动画何时开始 [delay]
animation-iteration-count: 2; 规定动画被播放的次数 [iteration-count]
animation-direction: alternate; 规定动画是否在下一周期逆向地播放 [direction]
}
@keyframes ani{
0% {
height: 200px;
}
40%, 70%{
height: 500px;
}
100% {
height:600px;
}
}