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 plain copy

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

CSS代码:

[css] view plain copy

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

每一个 @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 plain copy

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

CSS代码:

[css] view plain copy

.element {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
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;
}
@keyframes stretch {
0% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: orange;
}
100% {
transform: scale(1.5);
background-color: yellow;
}
}
body,
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}

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

`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 plain copy

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

CSS代码:

[css] view plain copy

.element {
height: 400px;
width: 400px;
background-color: red;
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
border-radius: 100%;
}
@keyframes pulse {
0%, 100% {
background-color: red;
}
50% {
background-color: orange;
}
}
@keyframes nudge {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}

性能

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

transform: translate()
transform: scale()
transform: rotate()
opacity

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