CSS

【CSS】CSS3アニメーションのライブラリMotion css

September 1, 2018
Motion CSS

Motion cssはCSS3アニメーションのライブラリです。アニメーション化されるべき要素に特定のクラスを使用することで簡単に動作します。

USE

headタグにスタイルシートを含める

 <link rel="stylesheet" href="motion.min.css">

アニメーション化する要素にクラスanimationを追加します。アイテムのアニメーションの種類を選択し、クラスを追加します。

<div class="animation fade-in-left">...

ADDITIONAL FEATURES

アニメーションを遅らせたい場合は、次のいずれかのクラスを使用します。

  1. delay-05s
  2. delay-1s
  3. delay-1-5s
  4. delay-2s
  5. delay-3s

自分で追加する

.delay-Xs
{
    -webkit-animation-delay: Xs! important;
    animation-delay: Xs! important;
}

ライブラリをjQueryと組み合わせて、サイトのアニメーションを完全に制御することもできます。

<script>
	$ (window) .scroll (function () {
	$ ('#elementId'). each (function () {
	var elPosition = $ (this) .offset (). top; 	// Position of the element
	var elHeight = $ (this) .height (); 		// Height of the element
	var windowTop = $ (window) .scrollTop (); 	// Top of the window
	var windowHeight = $ (window) .height (); 	// Height of the window
	if (elPosition < windowTop + windowHeight - elHeight) {
		$ (This) .addClass ("animation fade-in");
	} 						                   // adds the class wheh the element is fully in the visible area of the window
	if (elPosition > windowTop + windowHeight) {
		$ (This) .removeClass ("animation fade-in");
	} 						                   // removes the class when the element is not visible in the window
	if (elPosition + elHeight < windowTop) {
		$ (This) .removeClass ("animation fade-in");
	} 						                   // removes the class when the element is not visible in the window
	});
	});
</script>

MIT