各動作の段階毎の挙動を指定する #keyframes #animation

animationでアニメーションの動作を指定し、各動作の段階毎の挙動をkeyframesで指定できます。

f:id:hrt0kmt:20140714195917p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
        .a {
            width: 50px;
            height: 50px;
            padding: 10px;
            margin: 30px;
            background-color:#ff0000;
            animation: test 10s ease 1s infinite alternate;

        }
        @keyframes test {
            0% { width: 50px; background: blue; }
            100% { width: 150px; background: red; }
        }
    </style>
</head>
<body>
    <div class="a">foo</div>
</body>
</html>

第1引数はanimationの名前(animation-name)で、第2引数はanimationにかかる秒数(animation-duration)、第3引数はanimationの挙動をどのようにはやめたり遅めたりするか(animation-timing-function)、第4引数は、animationの繰り返しを設定します(animation-iteration-count`)です。

f:id:hrt0kmt:20140714201647p:plain

f:id:hrt0kmt:20140714201703p:plain



参照 参照2