> 通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。 * [手寫動畫 CSS](http://www.hmoore.net/wangking/uniapp/1906056#_CSS_3) * [CSS3 動畫屬性](http://www.hmoore.net/wangking/uniapp/1906056#CSS3__6) * [CSS3 @keyframes 規則](http://www.hmoore.net/wangking/uniapp/1906056#CSS3_keyframes__18) * [定義動畫 (animation)，使用keyframes](http://www.hmoore.net/wangking/uniapp/1906056#_animationkeyframes_30) * [使用 Animate.css 庫](http://www.hmoore.net/wangking/uniapp/1906056#_Animatecss__39) ## 手寫動畫 CSS > 純手工方式可以有更強的自定義性，當然前期不熟悉的情況下，可以參考Animate.css的寫法 ### CSS3 動畫屬性 | 屬性 | 描述 | CSS | | --- | --- | --- | | [@keyframes](https://www.w3school.com.cn/cssref/pr_keyframes.asp "CSS3 @keyframes 規則") | 規定動畫。 | 3 | | [animation](https://www.w3school.com.cn/cssref/pr_animation.asp "CSS3 animation 屬性") | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 | | [animation-name](https://www.w3school.com.cn/cssref/pr_animation-name.asp "CSS3 animation-name 屬性") | 規定 @keyframes 動畫的名稱。 | 3 | | [animation-duration](https://www.w3school.com.cn/cssref/pr_animation-duration.asp "CSS3 animation-duration 屬性") | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 | 3 | | [animation-timing-function](https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp "CSS3 animation-timing-function 屬性") | 規定動畫的速度曲線。默認是 "ease"。 | 3 | | [animation-delay](https://www.w3school.com.cn/cssref/pr_animation-delay.asp "CSS3 animation-delay 屬性") | 規定動畫何時開始。默認是 0。 | 3 | | [animation-iteration-count](https://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp "CSS3 animation-iteration-count 屬性") | 規定動畫被播放的次數。默認是 1。 | 3 | | [animation-direction](https://www.w3school.com.cn/cssref/pr_animation-direction.asp "CSS3 animation-direction 屬性") | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 | 3 | ### CSS3 @keyframes 規則 > 0% 是動畫的開始，100% 是動畫的完成 > 為了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器 ~~~ @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } ~~~ ### 定義動畫 (animation)，使用keyframes ~~~ .ami{ width: 100px; height: 50px; animation: myfirst 5s linear 2s infinite alternate; } ~~~ ## 使用 Animate.css 庫 > 可以用css3的原生代碼寫動畫效果，也可以使用別人封裝好的插件，比如 Animate.css > 下載css文件：[https://animate.style/](https://animate.style/) ~~~ <template> <view class="m-conatiner"> <view class="animate__animated animate__bounce">哈哈哈</view> </view> </template> <style> @import "/common/animate.min.css"; </style> ~~~