天天看點
傳回

純css3過渡動畫

最近一直在加班，積累了很多要記錄的東西，現在先記錄一下 關于純css3的動畫過渡，下面是一個效果圖 （錄制的有點粗糙 其實是自然過渡 ）

純css3過渡動畫

html

<span class="wait_">
 <i></i><i></i><i></i>
</span>

css

@-webkit-keyframes waitAn{
    0%{ background-color: #71411f;}
    45%{background-color: #bf9610;}
    80%{background-color: #bf9610;}
}

.wait_ i:first-child{
    animation: waitAn .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
}
.wait_ i:nth-child(2){
    animation: waitAn .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
}
.wait_ i:last-child{
    animation: waitAn .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
}

這裡是一個自定義動畫速度的函數 cubic-bezier() ​​貝塞爾曲線​​​ 以相同的速度從開始到結束的過渡效果 ​​這裡有篇部落格有詳細的介紹​​

cubic-bezier即為貝茲曲線中的繪制方法。圖上有四點，P0-3，其中P0、P3是預設的點，對應了[0,0], [1,1]。而剩下的P1、P2兩點則是我們通過cubic-bezier()自定義的。
cubic-bezier(x1, y1, x2, y2) 為自定義，x1,x2,y1,y2的值範圍在[0, 1]

這個圖就比較形象了  還有一個可以直覺看效果的 連結 

 下面參照補充幾個好看的loading
純css3過渡動畫
純css3過渡動畫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /*三個點大小漸變*/
        @keyframes scale {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1
            }

            45% {
                -webkit-transform: scale(0.1);
                transform: scale(0.1);
                opacity: .7
            }

            80% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1
            }
        }
        .ball-pulse>div:nth-child(1) {
            -webkit-animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
            animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08)
        }
        .ball-pulse>div:nth-child(2) {
            -webkit-animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
            animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08)
        }
        .ball-pulse>div:nth-child(3) {
            -webkit-animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
            animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08)
        }
        .ball-pulse>div {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block
        }
/*三個點 水波紋起伏*/
        @keyframes ball-pulse-sync {
            33% {
                -webkit-transform: translateY(10px);
                transform: translateY(10px)
            }

            66% {
                -webkit-transform: translateY(-10px);
                transform: translateY(-10px)
            }

            100% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }
        .ball-pulse-sync>div:nth-child(0) {
            -webkit-animation: ball-pulse-sync .6s -.21s infinite ease-in-out;
            animation: ball-pulse-sync .6s -.21s infinite ease-in-out
        }
        .ball-pulse-sync>div:nth-child(1) {
            -webkit-animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
            animation: ball-pulse-sync .6s -.14s infinite ease-in-out
        }
        .ball-pulse-sync>div:nth-child(2) {
            -webkit-animation: ball-pulse-sync .6s -.07s infinite ease-in-out;
            animation: ball-pulse-sync .6s -.07s infinite ease-in-out
        }
        .ball-pulse-sync>div:nth-child(3) {
            -webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
            animation: ball-pulse-sync .6s 0s infinite ease-in-out
        }
        .ball-pulse-sync>div {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block
        }
        /*三個點2d旋轉 放大縮小*/
        @keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }

            50% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg)
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }
        .ball-rotate {
            position: relative
        }
        .ball-rotate>div {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            position: relative
        }
        .ball-rotate>div:first-child {
            -webkit-animation: rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;
            animation: rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite
        }
        .ball-rotate>div:after,.ball-rotate>div:before {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            content: "";
            position: absolute;
            opacity: .8
        }
        .ball-rotate>div:before {
            top: 0;
            left: -28px
        }
        .ball-rotate>div:after {
            top: 0;
            left: 25px
        }
        /*三點 兩淺一深 變換*/
        @keyframes ball-beat {
            50% {
                opacity: .2;
                -webkit-transform: scale(0.75);
                transform: scale(0.75)
            }

            100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1)
            }
        }
        .ball-beat>div {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            display: inline-block;
            -webkit-animation: ball-beat .7s 0s infinite linear;
            animation: ball-beat .7s 0s infinite linear
        }
        .ball-beat>div:nth-child(2n-1) {
            -webkit-animation-delay: -.35s!important;
            animation-delay: -.35s!important
        }
        /*三個點 三角形軌迹 轉動*/
        @keyframes ball-triangle-path-1 {
            33% {
                -webkit-transform: translate(25px,-50px);
                transform: translate(25px,-50px)
            }

            66% {
                -webkit-transform: translate(50px,0);
                transform: translate(50px,0)
            }

            100% {
                -webkit-transform: translate(0px,0);
                transform: translate(0px,0)
            }
        }
        @keyframes ball-triangle-path-2 {
            33% {
                -webkit-transform: translate(25px,50px);
                transform: translate(25px,50px)
            }

            66% {
                -webkit-transform: translate(-25px,50px);
                transform: translate(-25px,50px)
            }

            100% {
                -webkit-transform: translate(0px,0);
                transform: translate(0px,0)
            }
        }
        @keyframes ball-triangle-path-3 {
            33% {
                -webkit-transform: translate(-50px,0);
                transform: translate(-50px,0)
            }

            66% {
                -webkit-transform: translate(-25px,-50px);
                transform: translate(-25px,-50px)
            }

            100% {
                -webkit-transform: translate(0px,0);
                transform: translate(0px,0)
            }
        }
        .ball-triangle-path {
            position: relative;
            -webkit-transform: translate(-29.99px,-37.51px);
            -ms-transform: translate(-29.99px,-37.51px);
            transform: translate(-29.99px,-37.51px)
        }
        .ball-triangle-path>div:nth-child(1) {
            -webkit-animation-name: ball-triangle-path-1;
            animation-name: ball-triangle-path-1;
            -webkit-animation-delay: 0;
            animation-delay: 0;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite
        }
        .ball-triangle-path>div:nth-child(2) {
            -webkit-animation-name: ball-triangle-path-2;
            animation-name: ball-triangle-path-2;
            -webkit-animation-delay: 0;
            animation-delay: 0;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite
        }
        .ball-triangle-path>div:nth-child(3) {
            -webkit-animation-name: ball-triangle-path-3;
            animation-name: ball-triangle-path-3;
            -webkit-animation-delay: 0;
            animation-delay: 0;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite
        }
        .ball-triangle-path>div {
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            border: 1px solid #fff
        }
        .ball-triangle-path>div:nth-of-type(1) {
            top: 50px
        }
        .ball-triangle-path>div:nth-of-type(2) {
            left: 25px
        }
        .ball-triangle-path>div:nth-of-type(3) {
            top: 50px;
            left: 50px
        }
        /*兩線 繞個圓*/
        @keyframes scale {
            30% {
                -webkit-transform: scale(0.3);
                transform: scale(0.3)
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1)
            }
        }
        .ball-clip-rotate-pulse {
            position: relative;
            -webkit-transform: translateY(-15px);
            -ms-transform: translateY(-15px);
            transform: translateY(-15px)
        }
        .ball-clip-rotate-pulse>div {
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 100%
        }
        .ball-clip-rotate-pulse>div:first-child {
            background: #fff;
            height: 16px;
            width: 16px;
            top: 7px;
            left: -7px;
            -webkit-animation: scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;
            animation: scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite
        }
        .ball-clip-rotate-pulse>div:last-child {
            position: absolute;
            width: 30px;
            height: 30px;
            left: -16px;
            top: -2px;
            background: 0 0;
            border: 2px solid;
            border-color: #fff transparent;
            -webkit-animation: rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;
            animation: rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;
            -webkit-animation-duration: 1s;
            animation-duration: 1s
        }
        /*兩個線繞圈*/
        @keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1)
            }

            50% {
                -webkit-transform: rotate(180deg) scale(0.6);
                transform: rotate(180deg) scale(0.6)
            }

            100% {
                -webkit-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1)
            }
        }
        .ball-clip-rotate-multiple {
            position: relative
        }
        .ball-clip-rotate-multiple>div {
            position: absolute;
            left: -20px;
            top: -20px;
            border: 2px solid #fff;
            border-bottom-color: transparent;
            border-top-color: transparent;
            border-radius: 100%;
            height: 35px;
            width: 35px;
            -webkit-animation: rotate 1s 0s ease-in-out infinite;
            animation: rotate 1s 0s ease-in-out infinite
        }
        .ball-clip-rotate-multiple>div:last-child {
            display: inline-block;
            top: -10px;
            left: -10px;
            width: 15px;
            height: 15px;
            -webkit-animation-duration: .5s;
            animation-duration: .5s;
            border-color: #fff transparent;
            -webkit-animation-direction: reverse;
            animation-direction: reverse
        }

        /*2個點 直線 繞x y轉圈*/
        @keyframes ball-zig {
            33% {
                -webkit-transform: translate(-15px,-30px);
                transform: translate(-15px,-30px)
            }

            66% {
                -webkit-transform: translate(15px,-30px);
                transform: translate(15px,-30px)
            }

            100% {
                -webkit-transform: translate(0,0);
                transform: translate(0,0)
            }
        }
        @keyframes ball-zag {
            33% {
                -webkit-transform: translate(15px,30px);
                transform: translate(15px,30px)
            }

            66% {
                -webkit-transform: translate(-15px,30px);
                transform: translate(-15px,30px)
            }

            100% {
                -webkit-transform: translate(0,0);
                transform: translate(0,0)
            }
        }
        .ball-zig-zag {
            position: relative;
            -webkit-transform: translate(-15px,-15px);
            -ms-transform: translate(-15px,-15px);
            transform: translate(-15px,-15px)
        }
        .ball-zig-zag>div {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px 2px 2px 15px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            position: absolute;
            top: 4px;
            left: -7px
        }
        .ball-zig-zag>div:first-child {
            -webkit-animation: ball-zig .7s 0s infinite linear;
            animation: ball-zig .7s 0s infinite linear
        }
        .ball-zig-zag>div:last-child {
            -webkit-animation: ball-zag .7s 0s infinite linear;
            animation: ball-zag .7s 0s infinite linear
        }
        /*2點 碰撞以後 反射 */
        @keyframes ball-zig-deflect {
            17% {
                -webkit-transform: translate(-15px,-30px);
                transform: translate(-15px,-30px)
            }
            34% {
                -webkit-transform: translate(15px,-30px);
                transform: translate(15px,-30px)
            }

            50% {
                -webkit-transform: translate(0,0);
                transform: translate(0,0)
            }

            67% {
                -webkit-transform: translate(15px,-30px);
                transform: translate(15px,-30px)
            }

            84% {
                -webkit-transform: translate(-15px,-30px);
                transform: translate(-15px,-30px)
            }

            100% {
                -webkit-transform: translate(0,0);
                transform: translate(0,0)
            }
        }
        @keyframes ball-zag-deflect {
            17% {
                -webkit-transform: translate(15px,30px);
                transform: translate(15px,30px)
            }

            34% {
                -webkit-transform: translate(-15px,30px);
                transform: translate(-15px,30px)
            }

            50% {
                -webkit-transform: translate(0,0);
                transform: translate(0,0)
            }

            67% {
                -webkit-transform: translate(-15px,30px);
                transform: translate(-15px,30px)
            }

            84% {
                -webkit-transform: translate(15px,30px);
                transform: translate(15px,30px)
            }

            100% {
                -webkit-transform: translate(0,0);
                transform: translate(0,0)
            }
        }
        .ball-zig-zag-deflect {
            position: relative;
            -webkit-transform: translate(-15px,-15px);
            -ms-transform: translate(-15px,-15px);
            transform: translate(-15px,-15px)
        }
        .ball-zig-zag-deflect>div {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px 2px 2px 15px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            position: absolute;
            top: 4px;
            left: -7px
        }
        .ball-zig-zag-deflect>div:first-child {
            -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
            animation: ball-zig-deflect 1.5s 0s infinite linear
        }
        .ball-zig-zag-deflect>div:last-child {
            -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
            animation: ball-zag-deflect 1.5s 0s infinite linear
        }
        /*兩個正方形 一條線 大小 旋轉*/
        @keyframes cube-transition {
            25% {
                -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
                transform: translateX(50px) scale(0.5) rotate(-90deg)
            }

            50% {
                -webkit-transform: translate(50px,50px) rotate(-180deg);
                transform: translate(50px,50px) rotate(-180deg)
            }

            75% {
                -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
                transform: translateY(50px) scale(0.5) rotate(-270deg)
            }

            100% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg)
            }
        }

        .cube-transition {
            position: relative;
            -webkit-transform: translate(-25px,-25px);
            -ms-transform: translate(-25px,-25px);
            transform: translate(-25px,-25px)
        }

        .cube-transition>div {
            width: 10px;
            height: 10px;
            position: absolute;
            top: -5px;
            left: -5px;
            background-color: #fff;
            -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
            animation: cube-transition 1.6s 0s infinite ease-in-out
        }

        .cube-transition>div:last-child {
            -webkit-animation-delay: -.8s;
            animation-delay: -.8s
        }
        /*利用過渡完成的 上個半圓旋轉*/
        @keyframes spin-rotate {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }

            50% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg)
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

        .semi-circle-spin {
            position: relative;
            width: 35px;
            height: 35px;
            overflow: hidden
        }

        .semi-circle-spin>div {
            position: absolute;
            border-width: 0;
            border-radius: 100%;
            -webkit-animation: spin-rotate .6s 0s infinite linear;
            animation: spin-rotate .6s 0s infinite linear;
            background-image: -webkit-linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);
            background-image: linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);
            width: 100%;
            height: 100%
        }
        /*三方形來回旋轉變換*/
        @keyframes triangle-skew-spin {
            25% {
                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                transform: perspective(100px) rotateX(180deg) rotateY(0)
            }

            50% {
                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                transform: perspective(100px) rotateX(180deg) rotateY(180deg)
            }

            75% {
                -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                transform: perspective(100px) rotateX(0) rotateY(180deg)
            }

            100% {
                -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                transform: perspective(100px) rotateX(0) rotateY(0)
            }
        }

        .triangle-skew-spin>div {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #fff;
            -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;
            animation: triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite
        }

        @keyframes square-spin {
            25% {
                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                transform: perspective(100px) rotateX(180deg) rotateY(0)
            }

            50% {
                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                transform: perspective(100px) rotateX(180deg) rotateY(180deg)
            }

            75% {
                -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                transform: perspective(100px) rotateX(0) rotateY(180deg)
            }

            100% {
                -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                transform: perspective(100px) rotateX(0) rotateY(0)
            }
        }

        .square-spin>div {
            width: 50px;
            height: 50px;
            background: #fff;
            border: 1px solid red;
            -webkit-animation: square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;
            animation: square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite
        }
        /*多個圈 從中心 漸顯 */
        @keyframes ball-scale-ripple-multiple {
            0% {
                -webkit-transform: scale(0.1);
                transform: scale(0.1);
                opacity: 1
            }

            70% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: .7
            }

            100% {
                opacity: 0
            }
        }
        .ball-scale-ripple-multiple {
            position: relative;
            -webkit-transform: translateY(-25px);
            -ms-transform: translateY(-25px);
            transform: translateY(-25px)
        }
        .ball-scale-ripple-multiple>div:nth-child(0) {
            -webkit-animation-delay: -.8s;
            animation-delay: -.8s
        }
        .ball-scale-ripple-multiple>div:nth-child(1) {
            -webkit-animation-delay: -.6s;
            animation-delay: -.6s
        }
        .ball-scale-ripple-multiple>div:nth-child(2) {
            -webkit-animation-delay: -.4s;
            animation-delay: -.4s
        }
        .ball-scale-ripple-multiple>div:nth-child(3) {
            -webkit-animation-delay: -.2s;
            animation-delay: -.2s
        }
        .ball-scale-ripple-multiple>div {
            position: absolute;
            top: -2px;
            left: -26px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            border: 2px solid #fff;
            -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);
            animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8)
        }
        /*中心擴散 水紋擴散*/
        @keyframes ball-scale-multiple {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 0
            }

            5% {
                opacity: 1
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0
            }
        }
        .ball-scale-multiple {
            position: relative;
            -webkit-transform: translateY(-30px);
            -ms-transform: translateY(-30px);
            transform: translateY(-30px)
        }
        .ball-scale-multiple>div:nth-child(2) {
            -webkit-animation-delay: -.4s;
            animation-delay: -.4s
        }
        .ball-scale-multiple>div:nth-child(3) {
            -webkit-animation-delay: -.2s;
            animation-delay: -.2s
        }
        .ball-scale-multiple>div {
            background-color: #fff;
            border-radius: 100%;
            position: absolute;
            left: -30px;
            top: 0;
            opacity: 0;
            margin: 0;
            width: 60px;
            height: 60px;
            -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
            animation: ball-scale-multiple 1s 0s linear infinite
        }
        /*五條線 波浪加載*/
        @keyframes line-scale {
            0% {
                -webkit-transform: scaley(1);
                transform: scaley(1)
            }

            50% {
                -webkit-transform: scaley(0.4);
                transform: scaley(0.4)
            }

            100% {
                -webkit-transform: scaley(1);
                transform: scaley(1)
            }
        }
        .line-scale>div:nth-child(1) {
            -webkit-animation: line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08);
            animation: line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08)
        }
        .line-scale>div:nth-child(2) {
            -webkit-animation: line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08);
            animation: line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08)
        }

        .line-scale>div:nth-child(3) {
            -webkit-animation: line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08);
            animation: line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08)
        }

        .line-scale>div:nth-child(4) {
            -webkit-animation: line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08);
            animation: line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08)
        }

        .line-scale>div:nth-child(5) {
            -webkit-animation: line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08);
            animation: line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08)
        }
        .line-scale>div {
            background-color: #fff;
            width: 4px;
            height: 35px;
            border-radius: 2px;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block
        }
        /*五條線 類似音樂過渡 */
        @keyframes line-scale-pulse-out {
            0% {
                -webkit-transform: scaley(1);
                transform: scaley(1)
            }

            50% {
                -webkit-transform: scaley(0.4);
                transform: scaley(0.4)
            }

            100% {
                -webkit-transform: scaley(1);
                transform: scaley(1)
            }
        }

        .line-scale-pulse-out>div {
            background-color: #fff;
            width: 4px;
            height: 35px;
            border-radius: 2px;
            margin: 2px;
            display: inline-block;
            -webkit-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85);
            animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85)
        }

        .line-scale-pulse-out>div:nth-child(2),.line-scale-pulse-out>div:nth-child(4) {
            -webkit-animation-delay: -.4s!important;
            animation-delay: -.4s!important
        }

        .line-scale-pulse-out>div:nth-child(1),.line-scale-pulse-out>div:nth-child(5) {
            -webkit-animation-delay: -.2s!important;
            animation-delay: -.2s!important
        }
        /*五條線 從中間開始 兩邊過渡*/
        @keyframes line-scale-pulse-out-rapid {
            0% {
                -webkit-transform: scaley(1);
                transform: scaley(1)
            }

            80% {
                -webkit-transform: scaley(0.3);
                transform: scaley(0.3)
            }

            90% {
                -webkit-transform: scaley(1);
                transform: scaley(1)
            }
        }
        .line-scale-pulse-out-rapid>div {
            background-color: #fff;
            width: 4px;
            height: 35px;
            border-radius: 2px;
            margin: 2px;
            display: inline-block;
            -webkit-animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);
            animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78)
        }

        .line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4) {
            -webkit-animation-delay: -.25s!important;
            animation-delay: -.25s!important
        }

        .line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5) {
            -webkit-animation-delay: 0s!important;
            animation-delay: 0s!important
        }

        /*九宮格 顔色漸變 大小不變*/
        @keyframes ball-grid-beat {
            50% {
                opacity: .7
            }

            100% {
                opacity: 1
            }
        }
        .ball-grid-beat {
            width: 57px
        }
        .ball-grid-beat>div:nth-child(1) {
            -webkit-animation-delay: -.07s;
            animation-delay: -.07s;
            -webkit-animation-duration: 1.53s;
            animation-duration: 1.53s
        }
        .ball-grid-beat>div:nth-child(2) {
            -webkit-animation-delay: .72s;
            animation-delay: .72s;
            -webkit-animation-duration: .94s;
            animation-duration: .94s
        }
        .ball-grid-beat>div:nth-child(3) {
            -webkit-animation-delay: .11s;
            animation-delay: .11s;
            -webkit-animation-duration: 1.25s;
            animation-duration: 1.25s
        }
        .ball-grid-beat>div:nth-child(4) {
            -webkit-animation-delay: .13s;
            animation-delay: .13s;
            -webkit-animation-duration: 1.01s;
            animation-duration: 1.01s
        }
        .ball-grid-beat>div:nth-child(5) {
            -webkit-animation-delay: .1s;
            animation-delay: .1s;
            -webkit-animation-duration: 1.2s;
            animation-duration: 1.2s
        }
        .ball-grid-beat>div:nth-child(6) {
            -webkit-animation-delay: .18s;
            animation-delay: .18s;
            -webkit-animation-duration: .97s;
            animation-duration: .97s
        }
        .ball-grid-beat>div:nth-child(7) {
            -webkit-animation-delay: -.09s;
            animation-delay: -.09s;
            -webkit-animation-duration: .67s;
            animation-duration: .67s
        }
        .ball-grid-beat>div:nth-child(8) {
            -webkit-animation-delay: .42s;
            animation-delay: .42s;
            -webkit-animation-duration: .92s;
            animation-duration: .92s
        }
        .ball-grid-beat>div:nth-child(9) {
            -webkit-animation-delay: .52s;
            animation-delay: .52s;
            -webkit-animation-duration: 1.43s;
            animation-duration: 1.43s
        }
        .ball-grid-beat>div {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block;
            float: left;
            -webkit-animation-name: ball-grid-beat;
            animation-name: ball-grid-beat;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-delay: 0;
            animation-delay: 0
        }
        /*九宮格顔色大小漸變*/
        @keyframes ball-grid-pulse {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1)
            }

            50% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                opacity: .7
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1
            }
        }
        .ball-grid-pulse {
            width: 57px
        }
        .ball-grid-pulse>div:nth-child(1) {
            -webkit-animation-delay: .73s;
            animation-delay: .73s;
            -webkit-animation-duration: 1.3s;
            animation-duration: 1.3s
        }
        .ball-grid-pulse>div:nth-child(2) {
            -webkit-animation-delay: .32s;
            animation-delay: .32s;
            -webkit-animation-duration: 1.3s;
            animation-duration: 1.3s
        }
        .ball-grid-pulse>div:nth-child(3) {
            -webkit-animation-delay: .71s;
            animation-delay: .71s;
            -webkit-animation-duration: .88s;
            animation-duration: .88s
        }
        .ball-grid-pulse>div:nth-child(4) {
            -webkit-animation-delay: .62s;
            animation-delay: .62s;
            -webkit-animation-duration: 1.06s;
            animation-duration: 1.06s
        }
        .ball-grid-pulse>div:nth-child(5) {
            -webkit-animation-delay: .31s;
            animation-delay: .31s;
            -webkit-animation-duration: .62s;
            animation-duration: .62s
        }
        .ball-grid-pulse>div:nth-child(6) {
            -webkit-animation-delay: -.14s;
            animation-delay: -.14s;
            -webkit-animation-duration: 1.48s;
            animation-duration: 1.48s
        }
        .ball-grid-pulse>div:nth-child(7) {
            -webkit-animation-delay: -.1s;
            animation-delay: -.1s;
            -webkit-animation-duration: 1.47s;
            animation-duration: 1.47s
        }
        .ball-grid-pulse>div:nth-child(8) {
            -webkit-animation-delay: .4s;
            animation-delay: .4s;
            -webkit-animation-duration: 1.49s;
            animation-duration: 1.49s
        }
        .ball-grid-pulse>div:nth-child(9) {
            -webkit-animation-delay: .73s;
            animation-delay: .73s;
            -webkit-animation-duration: .7s;
            animation-duration: .7s
        }
        .ball-grid-pulse>div {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block;
            float: left;
            -webkit-animation-name: ball-grid-pulse;
            animation-name: ball-grid-pulse;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-delay: 0;
            animation-delay: 0
        }
        /*8點大小顔色漸變 尋常loading*/
        @keyframes ball-spin-fade-loader {
            50% {
                opacity: .3;
                -webkit-transform: scale(0.4);
                transform: scale(0.4)
            }

            100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1)
            }
        }
        .ball-spin-fade-loader {
            position: relative;
            top: -10px;
            left: -10px
        }
        .ball-spin-fade-loader>div:nth-child(1) {
            top: 25px;
            left: 0;
            -webkit-animation: ball-spin-fade-loader 1s -.96s infinite linear;
            animation: ball-spin-fade-loader 1s -.96s infinite linear
        }
        .ball-spin-fade-loader>div:nth-child(2) {
            top: 17.05px;
            left: 17.05px;
            -webkit-animation: ball-spin-fade-loader 1s -.84s infinite linear;
            animation: ball-spin-fade-loader 1s -.84s infinite linear
        }
        .ball-spin-fade-loader>div:nth-child(3) {
            top: 0;
            left: 25px;
            -webkit-animation: ball-spin-fade-loader 1s -.72s infinite linear;
            animation: ball-spin-fade-loader 1s -.72s infinite linear
        }
        .ball-spin-fade-loader>div:nth-child(4) {
            top: -17.05px;
            left: 17.05px;
            -webkit-animation: ball-spin-fade-loader 1s -.6s infinite linear;
            animation: ball-spin-fade-loader 1s -.6s infinite linear
        }
        .ball-spin-fade-loader>div:nth-child(5) {
            top: -25px;
            left: 0;
            -webkit-animation: ball-spin-fade-loader 1s -.48s infinite linear;
            animation: ball-spin-fade-loader 1s -.48s infinite linear
        }
        .ball-spin-fade-loader>div:nth-child(6) {
            top: -17.05px;
            left: -17.05px;
            -webkit-animation: ball-spin-fade-loader 1s -.36s infinite linear;
            animation: ball-spin-fade-loader 1s -.36s infinite linear
        }
        .ball-spin-fade-loader>div:nth-child(7) {
            top: 0;
            left: -25px;
            -webkit-animation: ball-spin-fade-loader 1s -.24s infinite linear;
            animation: ball-spin-fade-loader 1s -.24s infinite linear
        }
        .ball-spin-fade-loader>div:nth-child(8) {
            top: 17.05px;
            left: -17.05px;
            -webkit-animation: ball-spin-fade-loader 1s -.12s infinite linear;
            animation: ball-spin-fade-loader 1s -.12s infinite linear
        }
        .ball-spin-fade-loader>div {
            background-color: #fff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            position: absolute
        }
        /*8個點 圍圈 顔色漸變*/
        @keyframes ball-spin-loader {
            75% {
                opacity: .2
            }

            100% {
                opacity: 1
            }
        }
        .ball-spin-loader {
            position: relative
        }
        .ball-spin-loader>span:nth-child(1) {
            top: 45px;
            left: 0;
            -webkit-animation: ball-spin-loader 2s .9s infinite linear;
            animation: ball-spin-loader 2s .9s infinite linear
        }
        .ball-spin-loader>span:nth-child(2) {
            top: 30.68px;
            left: 30.68px;
            -webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
            animation: ball-spin-loader 2s 1.8s infinite linear
        }
        .ball-spin-loader>span:nth-child(3) {
            top: 0;
            left: 45px;
            -webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
            animation: ball-spin-loader 2s 2.7s infinite linear
        }
        .ball-spin-loader>span:nth-child(4) {
            top: -30.68px;
            left: 30.68px;
            -webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
            animation: ball-spin-loader 2s 3.6s infinite linear
        }
        .ball-spin-loader>span:nth-child(5) {
            top: -45px;
            left: 0;
            -webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
            animation: ball-spin-loader 2s 4.5s infinite linear
        }
        .ball-spin-loader>span:nth-child(6) {
            top: -30.68px;
            left: -30.68px;
            -webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
            animation: ball-spin-loader 2s 5.4s infinite linear
        }
        .ball-spin-loader>span:nth-child(7) {
            top: 0;
            left: -45px;
            -webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
            animation: ball-spin-loader 2s 6.3s infinite linear
        }
        .ball-spin-loader>span:nth-child(8) {
            top: 30.68px;
            left: -30.68px;
            -webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
            animation: ball-spin-loader 2s 7.2s infinite linear
        }
        .ball-spin-loader>span {
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            position: absolute;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            background: #fff;
        }
        /*普通過渡加載 8條短線 花瓣式展開*/
        @keyframes line-spin-fade-loader {
            50% {
                opacity: .3
            }

            100% {
                opacity: 1
            }
        }
        .line-spin-fade-loader {
            position: relative;
            top: -10px;
            left: -4px
        }

        .line-spin-fade-loader>div:nth-child(1) {
            top: 20px;
            left: 0;
            -webkit-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out
        }

        .line-spin-fade-loader>div:nth-child(2) {
            top: 13.64px;
            left: 13.64px;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out
        }

        .line-spin-fade-loader>div:nth-child(3) {
            top: 0;
            left: 20px;
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            -webkit-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out
        }

        .line-spin-fade-loader>div:nth-child(4) {
            top: -13.64px;
            left: 13.64px;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out
        }

        .line-spin-fade-loader>div:nth-child(5) {
            top: -20px;
            left: 0;
            -webkit-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out
        }

        .line-spin-fade-loader>div:nth-child(6) {
            top: -13.64px;
            left: -13.64px;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out
        }

        .line-spin-fade-loader>div:nth-child(7) {
            top: 0;
            left: -20px;
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            -webkit-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out
        }

        .line-spin-fade-loader>div:nth-child(8) {
            top: 13.64px;
            left: -13.64px;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
            animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out
        }

        .line-spin-fade-loader>div {
            background-color: #fff;
            border-radius: 2px;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            position: absolute;
            width: 5px;
            height: 15px
        }

        /*吃球球的動畫過渡*/
        @keyframes rotate_pacman_half_up {
            0% {
                -webkit-transform: rotate(270deg);
                transform: rotate(270deg)
            }

            50% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
            }

            100% {
                -webkit-transform: rotate(270deg);
                transform: rotate(270deg)
            }
        }
        @keyframes rotate_pacman_half_down {
            0% {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg)
            }

            50% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }

            100% {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg)
            }
        }
        @keyframes pacman-balls {
            75% {
                opacity: .7
            }

            100% {
                -webkit-transform: translate(-100px,-6.25px);
                transform: translate(-100px,-6.25px)
            }
        }
        .pacman {
            position: relative
        }

        .pacman>div:nth-child(3) {
            -webkit-animation: pacman-balls 1s -.66s infinite linear;
            animation: pacman-balls 1s -.66s infinite linear
        }

        .pacman>div:nth-child(4) {
            -webkit-animation: pacman-balls 1s -.33s infinite linear;
            animation: pacman-balls 1s -.33s infinite linear
        }

        .pacman>div:nth-child(5) {
            -webkit-animation: pacman-balls 1s 0s infinite linear;
            animation: pacman-balls 1s 0s infinite linear
        }

        .pacman>div:first-of-type {
            width: 0;
            height: 0;
            border-right: 25px solid transparent;
            border-top: 25px solid #fff;
            border-left: 25px solid #fff;
            border-bottom: 25px solid #fff;
            border-radius: 25px;
            -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
            animation: rotate_pacman_half_up .5s 0s infinite;
            position: relative;
            left: -30px
        }
        .pacman>div:nth-child(2) {
            width: 0;
            height: 0;
            border-right: 25px solid transparent;
            border-top: 25px solid #fff;
            border-left: 25px solid #fff;
            border-bottom: 25px solid #fff;
            border-radius: 25px;
            -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
            animation: rotate_pacman_half_down .5s 0s infinite;
            margin-top: -50px;
            position: relative;
            left: -30px
        }
        .pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5),.pacman>div:nth-child(6) {
            background-color: #fff;
            border-radius: 100%;
            margin: 2px;
            width: 10px;
            height: 10px;
            position: absolute;
            -webkit-transform: translate(0,-6.25px);
            -ms-transform: translate(0,-6.25px);
            transform: translate(0,-6.25px);
            top: 25px;
            left: 70px
        }

        .loaders {
            font-size: 16px;
            background: #ed5565;
            padding: 15px;
        }
        .loader {
            display: inline-block;
            padding: 40px;
            width: 185px;
            box-sizing: border-box;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="loaders">
    <!--三個點 大小漸變-->
    <div class="loader">
        <div class="loader-inner ball-pulse">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--三個點波浪式-->
    <div class="loader">
        <div class="loader-inner ball-pulse-sync">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--三個點 旋轉 放大-->
    <div class="loader">
        <div class="loader-inner ball-rotate">
            <div></div>
        </div>
    </div>
<!--三點 兩色深 一個淺-->
    <div class="loader">
        <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--三個點 三角形軌迹-->
    <div class="loader">
        <div class="loader-inner ball-triangle-path">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--兩條線 繞一個圈-->
    <div class="loader">
        <div class="loader-inner ball-clip-rotate-pulse">
            <div></div>
            <div></div>
        </div>
    </div>
    <!--兩條線 繞圈-->
    <div class="loader">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
        </div>
    </div>
    <!--兩個點碰撞以後反射-->
    <div class="loader">
        <div class="loader-inner ball-zig-zag">
            <div></div>
            <div></div>
        </div>
    </div>
    <!--兩個點 旋轉-->
    <div class="loader">
        <div class="loader-inner ball-zig-zag-deflect">
            <div></div>
            <div></div>
        </div>
    </div>
<!--兩個正方形 旋轉-->
    <div class="loader">
        <div class="loader-inner cube-transition">
            <div></div>
            <div></div>
        </div>
    </div>
    <!--利用圖檔背景 實作半個上半圓旋轉-->
    <div class="loader">
        <div class="loader-inner semi-circle-spin">
            <div></div>
        </div>
    </div>
    <!--三方形來回旋轉變換-->
    <div class="loader">
        <div class="loader-inner triangle-skew-spin">
            <div></div>
        </div>
    </div>
<!--多個圓圈 從中間擴散-->
    <div class="loader">
        <div class="loader-inner ball-scale-ripple-multiple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--水波紋擴散-->
    <div class="loader">
        <div class="loader-inner ball-scale-multiple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
<!--五條線 波浪過渡-->
    <div class="loader">
        <div class="loader-inner line-scale">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--五條線 類似音樂國度-->
    <div class="loader">
        <div class="loader-inner line-scale-pulse-out-rapid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--五條線 從中間變換-->
    <div class="loader">
        <div class="loader-inner line-scale-pulse-out">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--九宮格顔色漸變 -->
    <div class="loader">
        <div class="loader-inner ball-grid-beat">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--九宮格大小顔色漸變-->
    <div class="loader">
        <div class="loader-inner ball-grid-pulse">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--八個點 尋常過渡-->
    <div class="loader">
        <div class="loader-inner ball-spin-fade-loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
<!--八個點 圍圈 顔色過渡-->
    <div class="loader">
        <div class="ball-spin-loader">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
    </div>

<!--八個線 顔色過渡-->
    <div class="loader">
        <div class="loader-inner line-spin-fade-loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!--吃球球 動畫-->

    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
</body>
</html>

View Code

整理了兩個小時 ，放在這裡 以後需要直接用。

　　

css animate 4s 顔色漸變 九宮格
上一篇: css-transition過渡動畫寫法
下一篇: 圖示動畫 Animated SVG Icons with Snap.svg

繼續閱讀