css3アニメーションanimation_html/css_WEB-ITnose-htmlチュートリアル-php.cn

アニメーション: アニメーション

アニメーションは依然として Webkit と moz core ブラウザーでのみ動作するようです

animation

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

} .test_box{ width:100px;height:100px; 背景色:rgba(190, 206, 235, 1);border:1px ソリッドブラック;} &lt ;/style>