[CSS] 基本メモ: キーフレームアニメーション (animation)

サンプル

<style>
#test1 {
    width: 50px;
    height: 50px;
    -webkit-animation: test1 5s linear 1s infinite alternate;
}
@-webkit-keyframes test1 {
    0% { width: 50px; background: orange; }
    50% { width: 100px; background: yellow; }
    100% { width: 150px; background: green; }
}
</style>

<div id="test1">Test1</div>

参考サイト

animation－CSS3リファレンス
http://www.htmq.com/css3/animation.shtml