CSS3动画

Animation 组成
CSS3 Animation 是由三部分组成。

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; left:0px;}
    30% {
    top: 300px; left:0px;}
    50% {
    top: 150px; left:0px;}
    70% {
    top: 300px; left:0px;}
    80% {
    top: 0px;  left:-200px;}
    100% {
    top: 0px;  left:0px;}
  }

2.动画属性
动画属性可以理解为播放器的相关功能，一个最基本的播放器应该具有：播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。
主要也分为两大点：