CSS3动画就是通过CSS3代码搭建的网页动画。允许设计师和开发人员，通过编辑网站的CSS3代码添加简单的页面动画。可实现HTML元素的动画效果，从一种样式逐渐变化为另一种样式的效果，本文章介绍css3动画animation属性大全和c
CSS3动画就是通过CSS3代码搭建的网页动画。允许设计师和开发人员，通过编辑网站的CSS3代码添加简单的页面动画。可实现HTML元素的动画效果，从一种样式逐渐变化为另一种样式的效果，本文章介绍css3动画animation属性大全和css3动画animation用法。
一、css3动画animation属性大全：
1、animation-name: 指定一个 @keyframes 的名称，动画将要使用这个@keyframes定义；
2、animation-duration: 整个动画需要的时长；
3、animation-timing-function: 动画进行中的时速控制，比如 ease或 linear；
4、animation-timing-delay: 动画延迟时间；
5、animation-direction: 动画重复执行时运动的方向；
6、animation-iteration-count: 动画循环执行次数；
7、animation-fill-mode: 设置动画执行完成后/开始执行前的状态，比如，你可以让动画执行完成后停留在最后一幕，或恢复到初始状态；
8、animation-play-state: 暂停/启动动画。
二、css3动画animation用法,请看下面这个例子：
HTML代码：
<div class="element"></div>
css代码：
.element { height: 250px; width: 250px; margin: 0 auto; background-color: red; animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-deLay: 0; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; } @keyframes stretch { 0% { transform: scale(.3); background-color: red; border-radius: 100% } 50% { background-color: orange; } 100% { transform: scale(1.5); background-coLor: yellow; } } body, html { height: 100%; } body { display: flex; align-items: center; justify-content: center; }