筆記來源：尚矽谷Web前端HTML5&CSS3初學者零基礎入門全套完整版

• 過渡與動畫
  • 1、過渡
  • 2、動畫
  • 3、實戰
    • 米兔
    • 奔跑的少年
    • 彈力球
    • 酷炫球

過渡與動畫

1、過渡

過渡（transition）

• 通過過渡可以指定一個屬性發生變化時的切換方式
• 通過過渡可以建立一些非常好的效果，提升使用者的體驗

屬性值

transition-property：指定要執行過渡的屬性

• 多個屬性間使用,隔開；
• 如果所有屬性都需要過渡，則使用all關鍵字；
• 大部分屬性都支援過渡效果；
• 注意過渡時必須是從一個有效數值向另外一個有效數值進行過渡；

transition-duration：指定過渡效果的持續時間

• 時間單位：s和ms（1s=1000ms）

transition-delay：過渡效果的延遲，等待一段時間後在執行過渡

transition-timing-function：過渡的時序函式

• linear勻速運動
• ease 預設值，慢速開始，先加速後減速
• ease-in 加速運動
• ease-out 減速運動
• ease-in-out 先加速後減速
• cubic-bezier()來指定時序函式 https://cubic-bezier.com
• steps()分步執行過渡效果，可以設定第二個值：
  • end，在時間結束時執行過渡（預設值）
  • start，在時間開始時執行過渡

transition：可以同時設定過渡相關的所有屬性

• 只有一個要求，如果要寫延遲，則兩個時間中第一個是持續時間，第二個是延遲時間

示例

/* transition: margin-left 2s 1s; */
transition-property: margin-left;
transition-duration: 2s;
transition-delay: 1s;

幾種過渡效果對比

linear勻速運動

transition-timing-function: linear;

ease 預設值，慢速開始，先加速後減速

transition-timing-function: ease;

ease-in 加速運動

transition-timing-function: ease-in;
 

ease-out 減速運動

transition-timing-function: ease-out;

ease-in-out 先加速後減速

transition-timing-function: ease-in-out;

cubic-bezier()來指定時序函式

transition-timing-function: cubic-bezier(.17, 1.79, .68, -0.69);

steps()分步執行過渡效果

/* transition-timing-function: steps(2, end); */
transition-timing-function: steps(2);

transition-timing-function: steps(2, start);

2、動畫

動畫和過渡類似，都是可以實現一些動態的效果，不同的是

• 過渡需要在某個屬性發生變化時才會觸發
• 動畫可以自動觸發動態效果

設定動畫效果，必須先要設定一個關鍵幀，關鍵幀設定了動畫執行每一個步驟

@keyframes test {
    from {
        margin-left: 0;
    }

    to {
        margin-left: 900px;
    }
}

animation-name 指定動畫的關鍵幀名稱

animation-duration：指定動畫效果的持續時間

animation-delay：動畫效果的延遲，等待一段時間後在執行動畫

animation-timing-function：動畫的時序函式

animation-iteration-count 動畫執行的次數

• infinite 無限執行

animation-direction 指定動畫執行的方向

• normal 從from向to執行，每次都是這樣，預設值
• reverse 從to向from執行，每次都是這樣
• alternate 從from向to執行，重複執行動畫時反向執行
• alternate-reverse 從to向from執行，重複執行動畫時反向執行

animation-play-state 設定動畫的執行狀態

• running 動畫執行，預設值
• paused 動畫暫停

animation-fill-mode 動畫的填充模式

• none 動畫執行完畢，元素回到原來位置，預設值
• forwards 動畫執行完畢，元素會停止在動畫結束的位置
• backwards 動畫延時等待時，元素就會處於開始位置
• both 結合了forwards和backwards

示例

/* animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both; */

animation: test 2s 2s linear infinite alternate both;

3、實戰

米兔

.box {
    height: 271px;
    width: 132px;
    background-image: url("/assets/米兔/bigtap-mitu-queue-big.png");
    margin: 100px auto;
    transition: background-position 1s steps(4);
}

.box:hover {
    background-position: -528px 0;
}

奔跑的少年

.box {
    height: 256px;
    width: calc(1536px/6);
    background-image: url("/assets/奔跑的少年/bg2.png");
    margin: 100px auto;
    animation: run 1s steps(6) infinite;

}

/* 關鍵幀 */
@keyframes run {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -1536px 0;
    }
}

彈力球

.outer {
    width: 100%;
    height: 700px;
    border-bottom: 10px solid #000;
    /* 外邊距重疊，開啟BFC */
    overflow: hidden;
}

.ball {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: gray;
    animation: bounce 6s ease-in;
}

@keyframes bounce {
    from {
        margin-top: 0;
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95%,
    98%,
    to {
        margin-top: 600px;
        animation-timing-function: ease-out;
    }

    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90% {
        animation-timing-function: ease-in;
    }

    10% {
        margin-top: 60px;
    }

    20% {
        margin-top: 120px;
    }

    30% {
        margin-top: 180px;
    }

    40% {
        margin-top: 240px;
    }

    50% {
        margin-top: 300px;
    }

    60% {
        margin-top: 360px;
    }

    70% {
        margin-top: 420px;
    }

    80% {
        margin-top: 480px;
    }

    90% {
        margin-top: 540px;
    }

    96% {
        margin-top: 580px;
    }

    99% {
        margin-top: 590px;
    }
}

酷炫球

div {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: bounce .5s infinite ease-in alternate;
}

.ball1 {
    background-color: red;
    animation-delay: .1s;
}

.ball2 {
    background-color: yellow;
    animation-delay: .2s;
}

.ball3 {
    background-color: green;
    animation-delay: .3s;
}

.ball4 {
    background-color: blue;
    animation-delay: .4s;
}

.ball5 {
    background-color: pink;
    animation-delay: .5s;
}

.ball6 {
    background-color: orange;
    animation-delay: .6s;
}

.ball7 {
    background-color: fuchsia;
    animation-delay: .7s;
}

.ball8 {
    background-color: gray;
    animation-delay: .8s;
}

.ball9 {
    background-color: darkcyan;
    animation-delay: .9s;
}

.ball10 {
    background-color: indigo;
    animation-delay: 1s;
}

.ball11 {
    background-color: black;
    animation-delay: 1.1s;
}

.ball12 {
    background-color: darkcyan;
    animation-delay: 1.2s;
}

.ball13 {
    background-color: darkkhaki;
    animation-delay: 1.3s;
}

.ball14 {
    background-color: brown;
    animation-delay: 1.4s;
}

.ball15 {
    background-color: mediumpurple;
    animation-delay: 1.5s;
}

@keyframes bounce {
    from {
        margin-top: 0;
    }

    to {
        margin-top: 500px;
    }

}