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,90px);

41         }

42         90%{

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

44         }

45         100%{

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

47         }

48     }

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