transition過渡 和animation 動畫 要知道 transition過渡和animation動畫都是實現元素運動的一種方式。區別在於： transition過渡需要人為觸發，例如點擊觸發或者滑鼠懸停觸發，而animation是可以不需要人為觸發。transition功能支持從一個屬性值 ...
transition過渡 和animation 動畫
要知道 transition過渡和animation動畫都是實現元素運動的一種方式。區別在於： transition過渡需要人為觸發，例如點擊觸發或者滑鼠懸停觸發，而animation是可以不需要人為觸發。transition功能支持從一個屬性值平滑到另外一個屬性值，animations功能支持通過關鍵幀的指定來在頁面產生更複雜的動畫效果。
transition過渡
transition 過渡是元素從一種樣式逐漸改變為另一種的效果。
要實現這一點，必須規定兩項內容：
- 規定您希望把效果添加到哪個 CSS 屬性上
- 規定效果的時長
如果時長未規定，則不會有過渡效果，因為預設值是 0
過濾的屬性
transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。預設是 0。
transition-timing-function 規定過渡效果的時間曲線。預設是 "ease"。
transition-delay 規定過渡效果何時開始。預設是 0。
實例
div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
animation 動畫
當您在 @keyframes 中創建動畫時，需要把它捆綁到某個選擇器，否則不會產生動畫效果。
動畫屬性
- 規定動畫的名稱
- 規定動畫的時長
您必須定義動畫的名稱和時長。如果忽略時長，則動畫不會允許，因為預設值是 0。
animation動畫屬性
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。預設是 0。
animation-timing-function 規定動畫的速度曲線。預設是 "ease"。
animation-delay 規定動畫何時開始。預設是 0。
animation-iteration-count 規定動畫被播放的次數。預設是 1。
animation-direction 規定動畫是否在下一周期逆向地播放。預設是 "normal"。
animation-play-state 規定動畫是否正在運行或暫停。預設是 "running"。
animation-fill-mode 規定對象動畫時間之外的狀態。
實例
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;/* Firefox */
-webkit-animation: myfirst 5s;/* Safari 和 Chrome */
-o-animation: myfirst 5s;/* Opera */
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
實踐源碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tree-table</title> <style> /*transition的動畫*/ .t1{ width:100px; height:100px; transition:background-color 2s,width 2s,height 2s; background-color:yellow; } .t1:hover{ width:200px; height:200px; transition:background-color 2s,width 2s,height 2s; background-color:red; } /*animation的動畫*/ .a1{ width:100px; height:100px; background-color:yellow; margin-top:20px; animation:m 5s infinite; position:relative; } @keyframes m{ 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;} } </style> </head> <body> <!-- transition的動畫 --> <h2>transition的動畫 滑鼠觸發</h2> <div class="t1"></div> <!-- animation的動畫 --> <h2>animation的動畫</h2> <div class="a1"></div> </body> <script> </script> </html>
