transform的参数见此文:https://blog.csdn.net/qq_43540219/article/details/107306782
1>animation
使用格式:
关键帧
@keyframes 动画名称{
0%{
transform:xxxxx
}
30%{
transform:xxxxx
}...
100%{
}
}
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
简写:
参数顺序依次是:
animation:名称 时间 速度曲线 延迟 次数 反向;
2>transition
transition:属性 时间 速度曲线 延迟
transform:xxxxx;
transform:xxxxx;
注意:
transition:all(过渡所有)
***补充animation和transition区别
transition要有事件支持(点击,鼠标移入)
animation自动触发