Animations

Posted on Edited on In Views: Disqus:

 

其實animation的使用方法跟transition有一點像，

只不過transition通常會跟hover配合，反而animation的用途更廣泛，

使用animation時，須跟@keyframes一起使用。

<!DOCTYPE html>
<html>
<head>
    <style>

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-duration: 4s;
    animation-name: example;
}

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
    </style>
</head>
<body>

    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

    <div></div>

    <p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>

</body>
</html>

上例先設定div最終顏色為藍色與設定animation的作用時間為4秒，

並設定animation-name名稱指到關鍵字@keyframes所宣告的名為example名稱，

example名稱內容為指定某屬性從某狀態變化到某狀態。

 

另一個例子為將@keyframes的狀態分成更多段的變化與加入更多變化屬性。

<!DOCTYPE html>
<html>
<head>
    <style>

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
}

@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
    </style>
</head>
<body>

    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

    <div></div>

</body>
</html>

 

1、animation-delay

用法與tranistion相同，表示一開始先延遲 n 秒再動作。

 

2、animation-duration

用法與tranistion相同，指定作用期間為 n 秒。

 

3、animation-timing-function

用法與tranistion相同，指定時間曲線。

 

4、animation-direction

<!DOCTYPE html>
<html>
<head>
    <style>

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: myfirst 5s infinite;
    animation-direction: alternate-reverse;
}

@keyframes myfirst {
    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>

    <p><strong>Note:</strong> The animation-direction property is not supported in Internet Explorer 9 and earlier versions.</p>
    <div></div>

</body>
</html>

其值可為normal(預設值)、reverse、alternate、alternate-reverse

(1)、normal

 其狀態由0%播到100%

(2)、reverse

其狀態由100%播到0%

(3)、alternate

播放次數為奇數次時其狀態由0%播到100%，反之其狀態由100%播到0%

(4)、alternate-reverse

播放次數為奇數次時其狀態由100%播到0%，反之其狀態由0%播到100%

 

5、animation-fill-mode

主要有四個值功能如下

(1)、none 此為預設值，當動畫播到結束時，會回到原來的初始值

(2)、forwards 此功能會保留動畫播到完成的值

(3)、backwards 停在動畫的第一個狀態上

(4)、both 視 animation-direction 來決定停在哪一個狀態上。

 

6、animation-iteration-count

意指動畫的重播次數，預設值為1，也可以指定為infinite(無限次數)

 

7、animation-play-state

用來決定動畫為播放或暫停，其值可為running(預設值)、paused

 

8、animation簡寫

其簡寫格式為animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 

9、animation-name與@keyframes

在使用動畫時，關鍵字@keyframes所宣告的名稱，可以讓animation-name來指定。

 

參考資料：

CSS3 動畫基礎