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; }

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

合并写法

如果动画有着同样的开始和结束属性,可以用逗号分隔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,欢迎大家传播与分享.

融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.