CSS3 動畫效果專輯（animation）

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/einafetsslly/article/details/78225090

最近同事推薦了我一個網站，讓我照着那網站全部自己寫一遍，學習學習，練練手。所以用到了動畫效果，覺得以後都會用到，所以索性整理記錄下來，方便重複使用。

動畫效果實例中的元素id、class名等都是直接從項目中粘貼過來的，可以根據實際需要更改。

首先寫一下動畫效果實現的基本語法等：

1、首先，用@keyframes聲明一個動畫，前面一般加瀏覽器前綴，後面加動畫名稱。

Chrome/Safiri/IOS/Android/Blackberry瀏覽器前綴：-webkit-

Firefox瀏覽器前綴：-moz-

語法：

@keyframes 動畫名稱{

    from{CSS樣式;}

    percentage{CSS樣式;}

    ...

    to{CSS樣式;}

}

也可以將from和to換成0%和100%。

2、其次，調用動畫

語法：

元素{

    animation：動畫屬性；

}

動畫屬性：可以一個個分開寫，也可以合併協商animation裏。

同時調用多個動畫時，不同的動畫之間用“,”逗號分隔。

動畫屬性包含：

①animation-name:動畫名稱，在@keyframes規則裏定義的；

②animation-duration：動畫播放的總時間，一般以秒爲單位；

③animation-timing-function：動畫播放方式，值：ease/linear/ease-in/ease-out/ease-in-out/ease-in-out/貝塞爾曲線

④animation-dadely：動畫延遲時間，一般以秒爲單位

⑤animation-iteration-count：動畫播放次數，值：infinite（無數次）/整數

⑥animation-direction：動畫播放方向，值：normal（向前）/alternate（偶數次向前播放，奇數次向反方向播放）

⑦animation-play-state：播放狀態，值：running（播放）/paused（暫停）

⑧animation-fill-mode：動畫開始和結束之後的操作，值：none（默認值，表示動畫播放結束後會返回到初始幀處）/forwards（保持最後關鍵幀時的動畫狀態）/backwards（動畫開始時便啓用動畫的初始幀）/both（同時具有forwards和backwards效果）

動畫一：圖片/圖標抖動(鼠標經過li時，img會抖動)

@-webkit-keyframes swing{
    from{

        -webkit-transform:translateX(3px) rotate(2deg);
        transform:translateX(3px) rotate(2deg);

    }
    20%{

        -webkit-transform:translateX(-3px) rotate(-2deg);
        transform:translateX(-3px) rotate(-2deg);

    }
    40%{

        -webkit-transform:translateX(3px) rotate(2deg);
        transform:translateX(3px) rotate(2deg);

    }
    60%{

        -webkit-transform:translateX(-3px) rotate(-2deg);
        transform:translateX(-3px) rotate(-2deg);

    }
    80%{

        -webkit-transform:translateX(3px) rotate(2deg);
        transform:translateX(3px) rotate(2deg);

    }
    to{

        -webkit-transform:translateX(-3px) rotate(-2deg);
        transform:translateX(-3px) rotate(-2deg);

    }
}

li:hover img{
    animation:swing .7s both;
}

動畫二：圖標/圖片永久旋轉

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

img{
	animation: rotate 2s infinite linear;
}

動畫三：元素逐個淡入加位移（h3標題裏的字逐個出現，且奇數個往下移，偶數個往上移）

html

<h3 id="welcome-h3">
    <span class="cssdb4d0922f1a9fa">文</span>
    <span class="cssdb4d0922f1a9fa">昭</span>
    <span class="cssdb4d0922f1a9fa">天</span>
    <span class="cssdb4d0922f1a9fa">下</span> 
    <span class="cssdb4d0922f1a9fa">博</span>
    <span class="cssdb4d0922f1a9fa">覽</span>
    <span class="cssdb4d0922f1a9fa">乾</span>
    <span class="cssdb4d0922f1a9fa">坤</span>
</h3>

css

@-webkit-keyframes downward{
	0%{
		-webkit-transform:translateY(-20px);
		transform:translateY(-20px);
	}
	100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
}

@-webkit-keyframes upward{
	0%{
		-webkit-transform:translateY(20px);
		transform:translateY(20px);
	}
	100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
}

#welcome-h3>span:nth-of-type(odd){
	animation: fade-in 2s ease-in forwards, downward 1s linear forwards;          
}

#welcome-h3>span:nth-of-type(even){
	animation: fade-in 2s ease-in forwards, upward 1s linear forwards;          
}

#welcome-h3>span:nth-of-type(2){
	animation-delay: 0.5s;          
}

#welcome-h3>span:nth-of-type(3){
	animation-delay: 1s;          
}

#welcome-h3>span:nth-of-type(4){
	animation-delay: 1.5s;          
}

#welcome-h3>span:nth-of-type(5){
	animation-delay: 2s;          
}

#welcome-h3>span:nth-of-type(6){
	animation-delay: 2.5s;          
}

#welcome-h3>span:nth-of-type(7){
	animation-delay: 3s;          
}

#welcome-h3>span:nth-of-type(8){
	animation-delay: 3.5s;          
}

動畫四：圖標/圖片永久上下移動

@-webkit-keyframes updown{
	25%{
	    -webkit-transform:translateY(-10px);
	    transform:translateY(-10px);
	}
	50%{
		-webkit-transform:translateY(0);
		transform:translateY(0);
	}
	75%{
		-webkit-transform:translateY(-10px);
		transform:translateY(-10px);
		}
}

img{
	animation: updown 2s infinite linear;
}

會持續更新別的動畫效果.......