アニメーション: アニメーション アニメーションは依然として Webkit と moz core ブラウザーでのみ動作するようです < head> < meta charset="UTF-8"> animation </p> <p> @-moz-keyframes サイズ変更{<br> 0 % {<br> パディング: 0 ;<br> }<br> 50% {<br> パディング: 0 20px;<br> 背景色:rgba(190, 206, 235, 0.2); <br> }<br> 100% {<br> パディング: 0 100px;<br> 背景色:rgba(190, 206, 235, 0.9);<br> }<br> }<br> /* Safari と Chrome */<br> @-webkit-keyframes サイズ変更 {<br> 0% {<br> パディング: 0;<br> }<br> 50% {<br> パディング : 0 20px;<br> 背景-color:rgba(190, 206, 235, 0.2); <br> }<br> 100% {<br> パディング: 0 100px;<br> 背景色:rgba(190, 206, 235, 0.9);<br> } <br>}<br>.anim_box: hover {<br> -moz-animation-name:size;/*アニメーションに名前を付けます*/<br> -moz-animation-duration: 1.5s;/*アニメーションが 1 サイクル完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。 */<br> -moz-animation-iteration-count: 4;/*アニメーションは、マウスがホバーしているときに 4 回のみ実行されます。 */<br> -moz-animation-direction: alter;/* 次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。 */<br> -moz-animation-timing-function:ease-in-out;/*アニメーションのスピードカーブを指定します。デフォルトは「簡単」です。 */<br> -webkit-animation-name: サイズ変更;<br> -webkit-animation-duration: 1.5s;<br> -webkit-animation-iteration-count: 4;<br> -webkit-animation-direction: alter;<br> -webkit-animation -timing-function: easy-in-out;</p> <p>}<br>.test_box{ width:100px;height:100px; 背景色:rgba(190, 206, 235, 1);border:1px ソリッドブラック;}<br> < ;/style><br></head><br><body><br> <div class="anim_box test_box"></div><br></body><br></html></p>
