現在前端的很多網站都有動態效果，banner圖上的內容也是彈入淡出，不會js的小夥伴就學學Animation ,transform,keyframess屬性吧 非常實用。學了幾天總結出來的內容就是一下幾點。
1. Animation 動畫屬性
Animation-name:規定需要綁定選擇去@keyframe名稱
Tweenedanimation的分類
Alpha：談入彈出效果
Scale：縮放效果
Rotate：旋轉效果
Translate：移動效果
1.1. 實例
|
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>註釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation 屬性。</p> <div></div> </body> </html> |
|
|
|
@keyframe name(name=animation:name){ From{} To{} }
|
2. Transform屬性
Transform屬性向元素應用2D或3D轉換。該屬性允許我們元素進行旋轉，縮放，移動或是傾斜。
2.1. 語法：
Transform：rotate (10deg); //deg度
Transform的屬性包括：rotate（）/skew()/scale()/translate(),f分別還有X,Y,之分，比如:rotate()和rotateY(),以此類推。
transform:rotate()：
含義：旋轉；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。
|
.demo_transform1{ -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)} |
transform:skew()：
含義：傾斜；
|
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)} |
transform:scale()：
含義：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，須寫成“2.0”，縮小則爲負“-”
|
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)} |
transform:translate()：
含義：變動，位移；如下表示向右位移120像素，如果向上位移，把後面的“0”改個值就行，向左向下位移則爲負“-”。
|
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)} |
3. keyframes 屬性
3.1. 語法
|
@keyframes animationName{ keyframes-selector{css-styles}} |
animationName:必須。 定義動畫的名稱
keyframes-selector:必須。動畫時長度的百分比。
合法值：
.0-100%
.from（與0%相同）to(與100%相同)
Css-styles:必須。一個或是多個合法的css樣式。
3.2. 實例
Css
|
.b_seation{ width: 1000px; height:auto; position:relative; top: 300px; left:0px; background: #FF0000; } .b_seation h2{ font-size: 100%; color: #FFFFFF; line-height: 40px;text-align: left; display: block; padding: 10px 30px;} .b_seation p{ width: 100%; height: auto; line-height: 30px; font-size: 16px; color: #FFFFFF; text-align: left; display: block; margin: 10px 0px; padding: 40px 30px; } |
@keyframes
|
#b_s_1{ animation: animationH 10s; -moz-animation: animationH 10s ; -webkit-animation: animationH 10s; } #b_s_2{ animation: animationG 10s; -moz-animation: animationG 10s ; -webkit-animation: animationG 10s; } @keyframes animationH{ 0%{ opacity: 0; transform: translate(200px,0); -moz-transform: translate(200px,0); -webkit-transform: translate(200px,0); } 50%{ opacity: 0.5;} 100%{ opacity: 1; transform: translate(0,0); -moz-transform: translate(0,0); -webkit-transform: translate(0,0); } } @keyframes animationG{ 0%{ opacity: 0; transform: translate(-200px,0); -moz-transform: translate(-200px,0); -webkit-transform: translate(-200px,0); } 50%{ opacity: 0.5;} 100%{ opacity: 1; transform: translate(0,0); -moz-transform: translate(0,0); -webkit-transform: translate(0,0); } } |
Html
|
<div class="b_seation"> <h2 id="b_s_1">transform的介紹</h2> <p id="b_s_2"> transform的屬性向 元素應用2D或是3D旋轉。該屬性允許我 們元素進 行旋轉，縮放，移動或是傾斜。rotate(<angle>) ：通過指定的角度參數對原元素指定一個 2D rotation （2D 旋轉），需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度，如果設 置的值爲正數表示順時針旋轉，如果設置的值爲負數，則表示逆時針旋轉。如：transform:rotate(30deg): </p> </div>
|
參照學習網站：http://caibaojian.com/transform.html
http://www.runoob.com/cssref/css3-pr-animation-keyframes.html
http://www.daqianduan.com/2959.html