使用动画以及过渡的方式

动画
1.关键帧(@keyframes)

关键帧(keyframes) - 定义动画在不同阶段的状态。
动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器）
css属性 - 就是css元素不同关键帧下的状态。

创建了一个@keyframes命名为dropdown。

关键帧主要分为3个阶段，0%、50%、100%。
动画播放时长为6s、循环播放(infinite)、以linear方式进行播放。
修改的元素属性为margin-top

.list div:first-child {
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
    0% { margin-top: 0px;}
   /** 暂停效果 */
   10% { margin-top: 0px;}
   50% { margin-top: -100px;}
   60% { margin-top: -100px;}
   90% { margin-top: -200px;}
  100% { margin-top: -200px;}
}

需要注意！当属性的个数不确定时：

当我们在定义不同关键帧，元素属性的个数是一个变化的值。
如果一个关键帧的属性，没有出现在其他关键帧的时候，那么这些属性将会使用上一帧的默认值。
区别在于，缺省之后的渐变效果是不会出现的。比如下面两种写法，

@keyframes dropdown {
    0% { top: 0; }
    30% { top: 300px; }
    50% { top: 150px; }
    70% { top: 300px; }
    80% { top: 0px;  left:-200px;}
    100% { top: 0px;  }
  }

2.动画方向（animation-direction）在这里插入代码片
animation-direction属性表示CSS动画是否反向播放。
可选配置参数为:

single-animation-direction = normal | reverse | alternate | alternate-reverse
animation-direction: normal 正序播放
animation-direction: reverse 倒序播放
animation-direction: alternate 交替播放
animation-direction: alternate-reverse 反向交替播放
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

3.动画延迟（animation-delay）

animation-delay属性定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。
默认值0s，表示动画在该元素上后立即开始执行。
该值以秒(s)或者毫秒(ms)为单位。
4.动画迭代次数（animation-iteration-count）

animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。
默认值只播放一次。

single-animation-iteration-count = infinite | number

5.动画填充模式（animation-fill-mode）

animation-fill-mode是指给定动画播放前后应用元素的样式。

single-animation-fill-mode = **none **| **forwards **| **backwards **| both

animation-fill-mode: none 动画执行前后不改变任何样式
animation-fill-mode: forwards 保持目标动画最后一帧的样式
animation-fill-mode: backwards 保持目标动画第一帧的样式
animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。

6.动画播放状态（animation-timing-function）

animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。
默认值为running

  single-animation-timing-function = running | paused

过渡属性
定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画改变css的属性值。

1.transition-property属性
定义：设置对象中的参与过渡的属性
语法：transition-property：none | all | property
例子：transition-property：width
说明：
none： 没有属性改变
all : 默认值，所有属性都改变
property： 元素的属性名 color等
2.transition-duration属性
定义: 设置对象过渡的持续时间
语法：transition-duration：time
例子：transition-duration：1s
说明：规定完成过渡效果需要花费的时间，以秒或者毫秒计，默认值0
3.transition-timing-function属性
定义：设置对象中过渡的动画类型
语法：transition-timing-function：linear 只能使用一个属性值
例子：transition-timing-function：linear
说明：
linear:线性过渡（匀速） cubic-bezier(0,0,1,1)
ease:平滑过渡（0–慢--快–慢），默认值 cubic-bezier(0.25,0.1,0.25,1)
ease-in:慢–快 cubic-bezier(0.42,0,1,1)
ease-out:快–慢 cubic-bezier(0,0,0.58,1)
ease-in-out:慢–快--慢 cubic-bezier(0.42,0,0.58,1)
贝塞尔曲线
4.transition-delay属性
定义：设置对象延迟的过渡时间
语法：transition-delay：time
例子 : transition-delay：1s
说明：指定秒或者毫秒数之前要等待切换效果的开始，默认是0
5.transition复合属性
定义：设置对象变换时的过渡
语法：transition ： property duration timing-function delay；
例子 : transition：width 1s ease 1s
注意：时间顺序不能乱