CSS旋转动画和动画的拼接

旋转动画

第一个样式：

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

第二个样式：

    .icon {
      color: #f5222d;
      animation: rotating 1.8s linear infinite;
      animation-fill-mode: forwards;
      display: inline-block;
      i {
        font-size: 60px;
      }
    }

HTML代码

<div class="icon">
        <i class="iconfont iconloading"></i>
</div>

linear是匀速运动，还可以设置为：
ease    默认。动画以低速开始，然后加快，在结束前变慢。
ease-in    动画以低速开始。    测试
ease-out    动画以低速结束。    测试
ease-in-out    动画以低速开始和结束。    测试
cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。


infinite是无限次播放的意思，这里也可以写个数字，来控制播放几次；

动画的拼接

keyframes样式

@keyframes dropDown {
    0% {
        transform: translate(0px, -120px);
        opacity: 0;
    }
    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@keyframes popUp {
    0% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate(0px, -120px);
        opacity: 0;
    }
}

元素样式

.appTip {
      animation-name: dropDown, popUp;
      animation-duration: 800ms, 800ms;
      animation-delay: 0ms, 3200ms;
      animation-timing-function: ease, ease;
      animation-iteration-count: 1, 1;
      animation-fill-mode: forwards, forwards;
}

animation-name可以设置两个（或多个）keyframes名；
后面的样式属性都是按照两个（或多个）keyframes来配置的；
只要把animation-delay配置好，就可以完美实现动画拼接了；