#13・14 キーフレームでアニメーション (2)

#13・14 キーフレームでアニメーション (2)

時間的変化ではあるんですが、アニメーションプロパティというものになっています。
６つあるそうです。
 animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction

これもまとめて記述できるそうです。

CSS3

<style>
 　　 div {
   　　　　width: 200px;
 　　 　　 height: 100px;
   　　　　padding: 60px;
   　　　　margin: 15px;
　　　　　background: radial-gradient(yellow, green);
  　　　　 border:2px solid black;
  　　　　 font-size:50px;
 　　　　  font-width:bold;
　　　　　 -webkit-animation: animationTesｔ 5s ease 1s infinite alternate;
 　　　 }
        @-webkit-keyframes animationTest {
           0% { width: 50px; background: red; }
           50% { width: 100px; background: blue; }
           100%  width: 100px; background: yellow; }
        }
 </style>

HTMLだけ

（Bioggerでは自動的にプロパティの順番が変更されるらしい？）

無理のようです・・・

みばえ
×_(._.)_

ちなみに「CSS３・HTMLセット」の#14.htmlを用意してブラウザで開くとうまくいきます。