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配置好，就能夠完美實現動畫拼接了；