アニメーションとtransition_html/css_WEB-ITnose

アニメーション

アニメーション、開始時刻を直接決定することはできません

デモ1

 1 @-webkit-keyframes demo-animation1{ 2         0% { 3             -webkit-transform:translate3d(0,0,0); 4             transform:translate3d(0,0,0); 5         } 6         100% { 7             -webkit-transform:translate3d(10px,0,0); 8             transform:translate3d(10px,0,0); 9         }10     }11     @keyframes demo-animation1{12         0% {13             -webkit-transform:translate3d(0,0,0);14             transform:translate3d(0,0,0);15         }16         100% {17             -webkit-transform:translate3d(10px,0,0);18             transform:translate3d(10px,0,0);19         }20     }21     .demo1{22         -webkit-animation-name:demo-animation1;23         animation-name:demo-animation1;24         -webkit-animation-duration:.5s;25         animation-duration:.5s;26         animation-iteration-count: infinite;27         -webkit-animation-iteration-count: infinite;28         /*-webkit-animation-fill-mode: both;29         animation-fill-mode: both;*/30         animation-direction: alternate;31         -webkit-animation-direction: alternate;32     }

トランジション

変更、開始時刻はホバー状態から直接設定できます

デモ2

れーれー