> 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 * [手写动画 CSS](https://www.kancloud.cn/wangking/uniapp/1906056#_CSS_3) * [CSS3 动画属性](https://www.kancloud.cn/wangking/uniapp/1906056#CSS3__6) * [CSS3 @keyframes 规则](https://www.kancloud.cn/wangking/uniapp/1906056#CSS3_keyframes__18) * [定义动画 (animation)，使用keyframes](https://www.kancloud.cn/wangking/uniapp/1906056#_animationkeyframes_30) * [使用 Animate.css 库](https://www.kancloud.cn/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> ~~~