你的位置:首页 > 网页设计

[网页设计]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-functionease, 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-durationXs 或者 Xms
animation-delayXs 或者 Xms
animation-iteration-countX
animation-fill-modeforwards, backwards, both, none
animation-directionnormal, alternate
animation-play-statepaused, 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 ,欢迎大家传播与分享.