一：transition（过渡效果）
属性有：
1、transition-property 指定应用过度属性的名称
-
2、transition-duration 指定过渡动画的时间
属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
3、transition-timing-function 指定动画的曲线
linear -> 匀速
- ease -> (默认) 先低速然后加快，结束前变慢
- ease-in -> 动画以低俗开始
- ease-out -> 动画以低俗结束
- ease-in-out -> 动画以低俗开始和结束
step(int, start|end) -> 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。
4、transition-delay: 延迟时间
规定了在过渡效果开始作用之前需要等待的时间。
值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
二：animation（动画效果）
属性有：
1、animation-name @keyform定义动画的名称
属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
2、animation-duration 指定一个动画周期的时长
3、animation-timing-function 定义动画的执行速度(linear)
linear -> 匀速
- ease -> (默认) 先低速然后加快，结束前变慢
- ease-in -> 动画以低俗开始
- ease-out -> 动画以低俗结束
- ease-in-out -> 动画以低俗开始和结束
step(int, start|end) -> 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。
4、animation-delay 动画延迟执行的时间
默认值为0s
如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。
如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。5、animation-iteration-count 动画执行的次数
定义动画在结束前运行的次数 可以是1次 无限循环.
animation-iteration-count: infinite; 无限次（循环）infinite
- 无限循环播放动画.
- 动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。
6、animation-direction 动画执行的方向
normal： 向前运动执行动画（默认值）
alternate： 动画交替反向运行
reverse： 反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse：
反向交替， 反向开始交替
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。7、animation-fill-mode
8、animation-play-state
若有收获，就点个赞吧
0 人点赞
