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结构:

 

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

 

CSS代码:

 

.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结构:

 

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

 

CSS代码:

 

.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代码结构

 

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

 

CSS代码:

 

.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 ,欢迎你们传播与分享.