css3中的动画怎么处理
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中的动画怎么处理”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注恰卡编程网行业资讯频道。
