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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/109844.html
標籤：Html/Css
上一篇：css盒模型。邊框和內外邊距
下一篇：負邊距與雙飛翼布局