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;