ホームページ > ウェブフロントエンド > htmlチュートリアル > アニメーションとtransition_html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 11:32:14
オリジナル
963 人が閲覧しました

アニメーション

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

デモ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

れーれー

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート