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
　　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,90p免费云主机、域名x);
　　41 }
　　42 90%{
　　43 transform: translate(90px,180px);
　　44 }
　　45 100%{
　　46 transform: translate(90px,90px);
　　47 }
　　48 }以上就是“css3中的动画怎么处理”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注云技术行业资讯频道。

相关推荐: CSS中的URL工具怎么用

小编给大家分享一下CSS中的URL工具怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！有许多原因使得你需要在CSS代码中系统性的替代URL：将其转换为数据URI、免费云主机、域名…