本篇文章给大家分享的内容是php全站开发工程师-扩展之css动画和animate.css和wow.js ，有需要的朋友可以参考一下
CSS3 动画
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。
1. CSS3 @keyframes 规则
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
2. CSS3的动画属性
属性 |
描述 立即学习“PHP免费学习笔记（深入）”； |
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 |
规定动画被播放的次数。默认是 1。Infinite：无限循环 |
3 |
animation-direction |
规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
3 |
animation-play-state |
规定动画是否正在运行或暂停。默认是 "running"。 |
3 |
3. animation-timing-function 属性
值 |
描述 立即学习“PHP免费学习笔记（深入）”； |
linear |
动画从头到尾的速度是相同的。 |
ease |
默认。动画以低速开始，然后加快，在结束前变慢。 |
ease-in |
动画以低速开始。 |
ease-out |
动画以低速结束。 |
ease-in-out |
动画以低速开始和结束。 |
cubic-bezier(n,n,n,n) |
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
实例：demo01
linear
ease
ease-in
ease-out
ease-in-out
下面的效果和上面实例一样
实例：demo02
linear
ease
ease-in
ease-out
ease-in-out
4. animation-direction 属性
值 |
描述 立即学习“PHP免费学习笔记（深入）”； |
normal |
默认值。动画按正常播放。 |
reverse |
动画反向播放。 |
alternate |
动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 |
alternate-reverse |
动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |
5. animation-play-state 属性
值 |
描述 立即学习“PHP免费学习笔记（深入）”； |
paused |
指定暂停动画 |
running |
指定正在运行的动画 |
实例：demo03
6. 属性简写
与上面的动画相同，但是使用了简写的动画 animation 属性：
实例：demo04
7. Animate.css插件
Animate.css是某位大牛写好的动画效果集合，需要的时候可以直接下载导入到项目中，在需要的元素上添加相关的类即可使用相对应的动画效果。
Animate.css:源码版下载
Animate.min.css压缩版下载
如：
bounce
Animated：表示使用Animate.css的动画
Infinite：表示动画效果无限循环
Bounce：是动画效果
动画效果有很多，下面的案例就展示了各种动画效果
实例：demo05
bounce
8. Wow.js插件
Wow.js是javascript动画插件，经常配合animate.css一起使用。动画效果会在元素第一次出现在页面中时起作用。
wow.js:源码版下载
wow.min.js压缩版下载
Wow.js的使用方法
引入wow.js
在需要使用的元素上添加class=”wow”
使用js初始化
实例：demo06
bounce
相关推荐：
