動畫

Table of Contents generated with DocToc

• 動畫
• transition
• transition-property
• transition-duration
• transition-delay
• transition-timing-function
• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-delay
• animation-fill-mode
• @keyframes

動畫

動畫示例代碼

transition

過度動畫

其為眾多 <single-transition> 的值縮寫。（當兩個時間同時出現(xiàn)是，第一個時間為動畫長度，第二個時間為動畫延時）

transition: <single-transition> [',' <single-transition>]*

<single-transition> = [none | <single-transition-property>] || <time> || <single-transition-timing-function> || <time>


transition: none;
transition: left 2s ease 1s, color 2s;
transition: 2s;

transition-property

transition-property: none | <single-traisition-property> [ ',' <single-transition-property>]*

<single-transition-property> = all | <IDENT>

transition-property: none;
<!-- 默認值為 none -->
transition-property: all;
transition-property: left;
transition-property: left, color;

transition-duration

transition-duration: <time>[, <time>]*

transition-duration: 0s;
transition-duration: 1s;
transition-duration: 1s, 2s, 3s;

transition-delay

transition-delay: <time>[,<time>]*

transition-delay: 0s;
transition-delay: 1s;
transition-delay: 1s, 2s, 3s;

transition-timing-function

transition-timing-function: <single-transition-timing-function>[',' <single-transition-timing-function>]*

<!-- 默認函數(shù)為 ease -->
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) | step-start | step-end | steps(<integer>)[, [start | end]]?)

<!-- 對于 cubic-bezier 的曲線，前兩個值為 P1 的坐標，后兩值為 P2 的坐標 -->

transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function: linear;
transition-timing-function: cubic-bezier(0, 0, 1, 1);

animation

animation: <single-animation> [',' <single-animation>]*

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || single-animation-play-state>

animation: none;
animation: abc 2s ease 0s 1 normal none running;
animation: abc 2s;
animation: abc 1s 2s both, abcd 2s both;
<!-- 調(diào)用多個動畫 -->

動畫可自動運行，但transition需要觸發(fā)。

animation-name

animation-name 的名字可自由定義。

animation-name: <single-animation-name>#

<single-animation-name> = none | <IDENT>

animation-name: none;
animation-name: abc;
animation-name: abc, abcd;

animation-duration

與 transition-duration 屬性值類似。

animation-duration: <time>[, <time>]*

animation-duration: 0s;
animation-duration: 1s;
animation-duration: 1s, 2s, 3s;

animation-timing-function

其與之前的 transition-timing-function 完全一模一樣。

animation-timing-function: <timing-function>#

<single-timing-function> = <single-transition-timing-function>

animation-timing-function: ease;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
animation-timing-function: linear;
animation-timing-function: cubic-bezier(0, 0, 1, 1);
animation-timing-function: ease, linear;

animation-iteration-count

其用于動畫執(zhí)行的次數(shù)（其默認值為 1）。

animation-iteration-count: <single-animation-iteration-count>#

<single-animation-iteration-count> = infinite | <number>

animation-iteration-count: 1;
animation-iteration-count: infinite;
animation-iteration-count: 1, 2, infinite;

animation-direction

其用于定義動畫的運動方向。

animation-direction:<single-animation-direction>#

<single-animation-direction> = normal | reverse | alternate | alternate-revers

animation-direction: reverse
<!-- 動畫相反幀的播放 -->
animation-direction: alternate
<!-- 往返執(zhí)行動畫 -->
animation-direction: alternate-revers
<!-- 相反的往返動畫 -->

animation-play-state

其用于設(shè)定動畫的播放狀態(tài)。

animation-play-state: <single-animation-play-state>#

<single-animation-play-state> = running | paused

animation-play-state: running;
animation-play-state: pasued;
animation-play-state: running, paused;

animation-delay

其用于設(shè)置動畫的延時，同 transition-delay 值相同。

animation-delay: <time>[, <time>]*
anim
animation-delay: 0s;
animation-delay: 1s;
animation-delay: 1s, 2s, 3s;

animation-fill-mode

其用于設(shè)置動畫開始時，是否保持第一幀的動畫和動畫在結(jié)束時時候保持最后的狀態(tài)。

animation-fill-mode: <single-animation-fill-mode>[',' <single-animation-fill-mode>]*

<single-animation-fill-mode> = none | backwards | forwards | both

animation-fill-mode: none;
<!-- 不做設(shè)置 -->
animation-fill-mode: backwards;
<!-- 動畫開始時出現(xiàn)在第一幀的狀態(tài) -->
animation-fill-mode: forwards;
<!-- 動畫結(jié)束時保留動畫結(jié)束時的狀態(tài) -->
animation-fill-mode: both;
<!-- 開始和結(jié)束時都應(yīng)保留關(guān)鍵幀定義的狀態(tài)（通常設(shè)定） -->
animation-fill-mode: forwards, backwards;

@keyframes

其用于定義關(guān)鍵幀。

<!-- 寫法一 -->
@keyframes abc {
  from {opacity: 1; height: 100px;}
  to {opacity: 0.5; height: 200px;}
}

<!-- 寫法二 -->
@keyframes abcd {
  0% {opacity: 1; height: 100px;}
  100% {opacity: 0.5; height: 200px}
}

@keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}

<!-- 例子 -->
animation: abc 0.5s both;
animation: flash 0.5s both;
animaiton: abc 0.5s both, flash 0.5s both;