H5中需要掌握的 ANIMATION 动画效果

CSS3的动画在PC网页上或者APP上用得越来越多,比如H5页面的应用,目前在营销传播上的意义比较大,还有企业官网或者APP主要介绍也用得比较多,当然还有很多地方都用到.所以学习css的动画也迫在眉睫.那我们就进入主题!

animation 属性在CSS中可以使用其他的css属性,来实现动画,例如color,background-color,height或者width.每一个动画需要定义@keyframes 动画名,作为animation的属性值,例如:

.element {
  animation: pulse 5s infinite;
}
@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }

}

我们来实现下面这个动作:

HTML结构:

[html] view plaincopy

1. <div class="element"></div>

CSS代码:

[css] view plaincopy

1. .element {
2. width: 100%;
3. height: 100%;
4. animation: pulse 5s infinite;
5. }
6. @keyframes pulse {
7. 0% {
8. background-color: #001F3F;
9. }
10. 100% {
11. background-color: #FF4136;
12. }
13. }

每一个 @keyframes 属性规则的定义,都会在指定的时间内发生动作.例如,动作从0%开始,到100%结束.keyframes 可以用简写方式,animation属性来控制,或者其他八个子属性,控制keyframes如何运作..

子属性

• animation-name: 申明动画@keyframes的名称.

• animation-duration: 动画在多久内完成一个周期.

• animation-timing-function: 设置预加速度曲线动画,例如 ease 或者linear.

• animation-delay: 动画延迟执行的时间.

• animation-direction: 设定动画执行完成后的方向.默认是起始开始执行.

• animation-iteration-count: 动画执行的次数.

• animation-fill-mode:设定动画是执行之前还是之后.
  例如,你可以设置动画保持在最后的状态,或者也可以切换回动画开始的状态.

• animation-play-state: 开始或者暂停动画

这些属性可以这样使用:

@keyframes stretch {
  /* declare animation actions here */
}
.element {
  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; 
}
/*
  is the same as:
*/
.element {
  animation:
    stretch
    1.5s
    ease-out
    0
    alternate
    infinite
    none
    running;

}

我们来看下这个动画:

HTML结构:

[html] view plaincopy

1. <div class="element"></div>

CSS代码:

[css] view plaincopy

1. .element {
2. height: 250px;
3. width: 250px;
4. margin: 0 auto;
5. background-color: red;
6. animation-name: stretch;
7. animation-duration: 1.5s;
8. animation-timing-function: ease-out;
9. animation-delay: 0;
10. animation-direction: alternate;
11. animation-iteration-count: infinite;
12. animation-fill-mode: none;
13. animation-play-state: running;
14. }
15. @keyframes stretch {
16. 0% {
17. transform: scale(.3);
18. background-color: red;
19. border-radius: 100%;
20. }
21. 50% {
22. background-color: orange;
23. }
24. 100% {
25. transform: scale(1.5);
26. background-color: yellow;
27. }
28. }
29. body,
30. html {
31. height: 100%;
32. }
33. body {
34. display: flex;
35. align-items: center;
36. justify-content: center;
37. }

下面是子属性可以使用的所有值列表:

animation-timing-function	ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (例如. cubic-bezier(0.5, 0.2, 0.3, 1.0))
animation-duration	Xs 或者 Xms
animation-delay	Xs 或者 Xms
animation-iteration-count	X
animation-fill-mode	forwards, backwards, both, none
animation-direction	normal, alternate
animation-play-state	paused, running, running

合并写法

如果动画有着同样的开始和结束属性,可以用逗号分隔0%和100%:

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }

}

多个动画

一个选择器可以同时申明多个动画,它们之间用逗号隔开.下面的例子,使用了两个keyframe,也就是2个动画的效果

.element {
  animation:
    pulse 3s ease infinite alternate,
    nudge 5s linear infinite alternate;
}

我们看下下面这个动画

HTML代码结构

[html] view plaincopy

1. <div class="element"></div>

CSS代码:

[css] view plaincopy

1. .element {
2. height: 400px;
3. width: 400px;
4. background-color: red;
5. animation:
6. pulse 3s ease infinite alternate,
7. nudge 5s linear infinite alternate;
8. border-radius: 100%;
9. }
10. @keyframes pulse {
11. 0%, 100% {
12. background-color: red;
13. }
14. 50% {
15. background-color: orange;
16. }
17. }
18. @keyframes nudge {
19. 0%, 100% {
20. transform: translate(0, 0);
21. }
22. 50% {
23. transform: translate(150px, 0);
24. }
25. 80% {
26. transform: translate(-150px, 0);
27. }
28. }
29. html, body {
30. height: 100%;
31. }
32. body {
33. display: flex;
34. align-items: center;
35. justify-content: center;
36. }

性能

多数动画属性都存在着性能问题,因此,我们在使用它们的时候,需要谨慎的去处理.可以,我们也可以和下面的安全性动画一起使用:

• transform: translate()

• transform: scale()

• transform: rotate()

• opacity

本文属于吴统威的博客,微信公众号:bianchengderen 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=151 ,欢迎大家传播与分享.