css3动画animation属性大全(css3动画animation用法)

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;
 }