css3中的动画怎么处理

今天小编给大家分享一下css3中的动画怎么处理的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　动画--过渡属性

　　div {

　　width: 200px;

　　height: 200px;

　　background: red;

　　margin: 20px auto;

　　-WEBkit-transition-property: width;

　　transition-property: width;

　　-webkit-transition-duration:.5s;

　　transition-duration:.5s;

　　-webkit-transition-timing-function: ease-in;

　　transition-timing-function: ease-in;

　　-webkit-transition-delay: .18s;

　　transition-delay:.18s;

　　}

　　div:hover {  transition: all .28s ease-in .1s;

　　width: 400px;

　　}

　　Keyframes被称为关键帧 以“@keyframes”开头

　　@keyframes changecolor{ 声明的动画可自己定义

　　0%{

　　background: red;

　　}

　　40% {

　　background:orange;

　　100%{

　　background: green;

　　}

　　}

　　div{animation-iteration-count:infinite;

　　animation-iteration-count:5;

　　animation-name:move;

　　animation-direction:alternate;

　　animation-play-state:paused;

　　}

　　设置动画播放方向  animation-direction

　　其主要有两个值：nORMal、alternate

　　1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

　　2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

　　1 <div><span></span></div>

　　2

　　3                          div {

　　4                              width: 200px;

　　5                              height: 200px;

　　6                              border: 1px solid red;

　　7                              margin: 20px auto;

　　8                          }

　　9     span {

　　10         display: inline-block;

　　11         width: 20px;

　　12         height: 20px;

　　13         background: orange;

　　14         transform: translateY(90px);

　　15         animation-name: move;

　　16         animation-duration: 10s;

　　17         animation-timing-function: ease-in;

　　18         animation-delay: .2s;

　　19         animation-iteration-count:infinite;

　　20         animation-direction:alternate;

　　21     }

　　22

　　23     @keyframes move {

　　24         0%{

　　25             transform: translateY(90px);

　　26         }

　　27         15%{

　　28             transform: translate(90px,90px);

　　29         }

　　30         30%{

　　31             transform: translate(180px,90px);

　　32         }

　　33         45%{

　　34             transform: translate(90px,90px);

　　35         }

　　36         60%{

　　37             transform: translate(90px,0);

　　38         }

　　39         75%{

　　40             transform: translate(90px,90px);

　　41         }

　　42         90%{

　　43             transform: translate(90px,180px);

　　44         }

　　45         100%{

　　46             transform: translate(90px,90px);

　　47         }

　　48     }

以上就是“CSS3中的动画怎么处理”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网VUE频道。