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

CSS3アニメーションevent_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:36:08
オリジナル
900 人が閲覧しました

CSS3 には強力なアニメーション効果があり、モバイル端末で広く使用されており、JS を使用してアニメーション実行の開始時と終了時にそのイベントを監視できます。

  1. animationstart
  2. animationend

以下は例です

<!DOCTYPE html><html><head>    <meta charset="utf-8">	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">    <meta content="yes" name="apple-mobile-web-app-capable">    <meta content="black" name="apple-mobile-web-app-status-bar-style">    <meta content="telephone=no" name="format-detection">    <meta content="email=no" name="format-detection">    <title>CSS3 动画事件</title>    <style type="text/css">		h1 {		  animation-duration: 3s;		  animation-name: slidein;/*		  animation-iteration-count: infinite;          animation-direction: alternate;		*/  		}		@keyframes slidein {		  from {		    margin-left: 100%;		    width: 100%; 		  }		  to {		    margin-left: 0%;		    width: 100%;		  }		}    </style></head> <body> 	<h1 id="ani">Test CSS3 SlideIn</h1>	<script>		ani.addEventListener('animationstart', function() {			console.log('animate start')		}, false);		ani.addEventListener('animationend', function() {			console.log('animate end')		}, false);		</script></body></html>
ログイン後にコピー

アニメーションイベントを追加することで、いくつかの画像を連続して表示できます。

関連:

http://www.w3.org/TR/css3-animations/#animation-events

https://developer.mozilla.org/en-US/docs/Web/CSS/ CSS_アニメーション/CSS_アニメーションの使用

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