transition:; 过渡 需要事件触发
animation 动画 不需要事件触发,使用关键帧就可以执行
1: 定义动画
from{}起始位置
to{}终点位置
0%{}起始位置
25%{}过程1
...过程n
100%{} 终点位置
2: 调用动画
animation-name:;关键帧名字 动画名
animation-duration:;关键帧时长 总运动时间
animation-delay:;关键帧延迟时间
animation-iteration-count:;运动执行次数
数字 数字为几,执行多少次
默认情况一次
infinite无限循环
animation-direction:;动方向
reverse 反向运动
alternate 单数次,顺时针 偶数次,逆时针
alternate-reverse 单数次,逆时针 偶数次,顺时针
animation-timing-function:;运动使用的类型(加速 减速 贝塞尔曲线运动...)
animation-play-state:;
paused 暂停
running 运动
3:综合写法:
animation:名字 运动时间 速度 延迟时间 次数;