animate.css与wow.js制作网站动效

animate.css

官网： https://daneden.github.io/animate.css/

包括：attention seekers：关注者

bouncing entrances：跳跃进入

Bouncing Exits：

Fading Entrances

Fading Exits：渐变退出

Flippers： 脚蹼

Lightspeed：光速

Rotating Entrances：

Rotating Exits：旋转退出

Sliding Entrances

Sliding Exits：滑动退出

Zoom Entrances

Zoom Exits：变焦退出

Specials

 

wow.js  

Reveal Animations When You Scroll. Very Animate.css Friend :-)  
Easily customize animation settings: style, delay, length, offset, iterations...

官网：http://mynameismatthieu.com/WOW/

 

css3动画

css3 @keyframes规则 ie10+

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

对比转换 transform（静态）

转换是使元素改变形状、尺寸和位置的一种效果

• translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数       transform: translate(50px,100px);
• rotate()：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。   transform: rotate(30deg);
• scale()：通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：  transform: scale(2,4);
• skew()：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数： transform: skew(30deg,20deg);
• matrix()：matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 transform:matrix(0.866,0.5,-0.5,0.866,0,0);

对比过渡 transition

transition: width 1s linear 2s;