animations與transition

時間 2019-11-07

標籤 animations transition 简体版

原文原文鏈接

transition過渡和animation 動畫

要知道 transition過渡和animation動畫都是實現元素運動的一種方式。區別在於： transition過渡須要人爲觸發，例如點擊觸發或者鼠標懸停觸發，而animation是能夠不須要人爲觸發。transition功能支持從一個屬性值平滑到另一個屬性值，animations功能支持經過關鍵幀的指定來在頁面產生更復雜的動畫效果。html

transition過渡web

transition 過渡是元素從一種樣式逐漸改變爲另外一種的效果。動畫

要實現這一點，必須規定兩項內容：spa

規定您但願把效果添加到哪一個 CSS 屬性上
規定效果的時長

若是時長未規定，則不會有過渡效果，由於默認值是 0code

過濾的屬性orm

　　transition 　　　　　　　　簡寫屬性，用於在一個屬性中設置四個過渡屬性。htm

　　transition-property 　　　　規定應用過渡的 CSS 屬性的名稱。對象

　　transition-duration　　　　定義過渡效果花費的時間。默認是 0。blog

　　transition-timing-function 　　規定過渡效果的時間曲線。默認是 "ease"。ip

　　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>