本篇文章给大家分享的内容是PHP全站开发工程师-扩展之CSS动画和animate.css和wow.js ,有需要的朋友可以参考一下


CSS3 动画


CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。

1. CSS3 @keyframes 规则

@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

2. CSS3的动画属性


属性

描述

CSS

@keyframes

规定动画。

3

animation

所有动画属性的简写属性,除了 animation-play-state 属性。

3

animation-name

规定 @keyframes 动画的名称。

3

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0

3

animation-timing-function

规定动画的速度曲线。默认是 "ease"

3

animation-delay

规定动画何时开始。默认是 0

3

animation-iteration-count

规定动画被播放的次数。默认是 1Infinite:无限循环

3

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal"

3

animation-play-state

规定动画是否正在运行或暂停。默认是 "running"

3


3. animation-timing-function 属性


描述

linear

动画从头到尾的速度是相同的。

ease

默认。动画以低速开始,然后加快,在结束前变慢。

ease-in

动画以低速开始。

ease-out

动画以低速结束。

ease-in-out

动画以低速开始和结束。

cubic-bezier(n,n,n,n)

cubic-bezier 函数中自己的值。可能的值是从 0 1 的数值。



实例:demo01

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p { width: 100px; height: 50px; background: red; color: white; font-weight: bold; position: relative; animation: mymove 5s; -webkit-animation: mymove 5s; } #p1 {animation-timing-function: linear; } #p2 {animation-timing-function: ease; } #p3 {animation-timing-function: ease-in; } #p4 {animation-timing-function: ease-out; } #p5 {animation-timing-function: ease-in-out; } #p1 {-webkit-animation-timing-function: linear; } #p2 {-webkit-animation-timing-function: ease; } #p3 {-webkit-animation-timing-function: ease-in; } #p4 {-webkit-animation-timing-function: ease-out; } #p5 {-webkit-animation-timing-function: ease-in-out; } @keyframes mymove { from {left: 0px; } to {left: 300px; } } @-webkit-keyframes mymove{ from {left: 0px; } to {left: 300px; } } </style> </head> <body> <p id="p1">linear</p> <p id="p2">ease</p> <p id="p3">ease-in</p> <p id="p4">ease-out</p> <p id="p5">ease-in-out</p> </body> </html>

PHP全站开发工程师-扩展之CSS动画和animate.css和wow.js -php教程-PHP中文网



下面的效果和上面实例一样


实例:demo02

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p { width:100px; height:50px; background:red; color:white; font-weight:bold; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; } #p1 {animation-timing-function:cubic-bezier(0,0,0.25,1);} #p2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);} #p3 {animation-timing-function:cubic-bezier(0.42,0,1,1);} #p4 {animation-timing-function:cubic-bezier(0,0,0.58,1);} #p5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);} #p1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);} #p2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);} #p3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);} #p4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);} #p5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);} @keyframes mymove { from {left:0px;} to {left:300px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {left:0px;} to {left:300px;} } </style> </head> <body> <p id="p1">linear</p> <p id="p2">ease</p> <p id="p3">ease-in</p> <p id="p4">ease-out</p> <p id="p5">ease-in-out</p> </body> </html>4. animation-direction 属性


描述

normal

默认值。动画按正常播放。

reverse

动画反向播放。

alternate