CSS3 アニメーションless_html/css_WEB-ITnose 上に構築された CSS3 アニメーション ライブラリ

LESS アニメーションの利点

· CSS3 アニメーションを迅速に開発します

· 使用するミックスインの記述方法が少なく、冗長な CSS が生成されません

· 互換性を最大限に高めるために、主流のブラウザのプレフィックスが追加されました

· LESS-Animation は、いくつかの機能をサポートしますmixins パラメーターを渡し、アニメーションの振幅をカスタマイズします

(追記: Sublime のless2css プラグインは、このライブラリをコンパイルするいくつかの新しい方法をサポートしていない可能性があります。コンパイルには、公式のlessコンパイル、Koala、フロントエンド構築ツールなどを使用することをお勧めします。コミュニケーショングループ: 145423956)

使い方

このlessファイルには主にLESS-PrefixerとLESS-Animationの2つの機能が含まれています。

・_animation.less ファイルをダウンロードします。git アドレス:

git@github.com:w3cmark/css3.git

・ _animation.less をメインのlessファイルに導入します

@import "_animation.less";

LESS-Prefixer

LESS-Prefixer は一連の LESS ミックスインを使用すると、CSS3 を記述するときに各ブラウザーのプレフィックスを削除し、コードの記述を簡素化できます。

使い方

・css3のtransitionを書く場合:

div{  -webkit-transition:all 0.2s ease-out;  -o-transition:all 0.2s ease-out;  -ms-transition:all 0.2s ease-out;  -moz-transition:all 0.2s ease-out;  transition:all 0.2s ease-out;}

・ _animation.lessを導入すると、次のように書くことができます:

div{  .transition(all 0.2s ease-out);}

サポートされている属性

rree

LESS-Animation

mixin 直接参照

LESS-Animation は、いくつかの基本的なアニメーションを統合するless ベースのライブラリであり (含まれているアニメーションは上でプレビューできます)、対応するアニメーション ミックスインを直接呼び出すことができます。

アニメーションフレーム名はミックスイン名と一致しているため、呼び出しやすくなっています。

・チェストナット 1: バウンスアニメーションを参照するには、.bounce();

.transition(@arg).transition-delay(@delay).transition-duration(@duration).transition-property(@property).transition-timing-function(@function).transition-delay(@delay).transition-delay(@delay).transform(@arg).transform-origin(@args).transform-style(@style).rotate(@deg).scale(@factor).translate(@x,@y).translate3d(@x,@y,@z).translateHardware(@x,@y).animation(@arg).animation-delay(@delay).animation-direction(@direction).animation-duration(@duration).animation-fill-mode(@mode).animation-iteration-count(@count).animation-name(@name).animation-play-state(@state).animation-timing-function(@function).flex(@arg).flexbox().opacity(@number).box-shadow(@arg).box-sizing(@arg).border-color(@arg).border-image(@arg).border-radius(@arg).background-origin(@arg).background-clip(@arg).background-size(@arg).columns(@args).column-count(@count).column-gap(@gap).column-width(@width).column-rule(@args).gradient(@default, @start, @stop).linear-gradient-top(@default,@color1,@stop1,@color2,@stop2).linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3).linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4).linear-gradient-left(@default,@color1,@stop1,@color2,@stop2).linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3).linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4)

を追加するだけです

・ チェストナット 2: bounceIn アニメーションを参照するには、.bounceIn();

.bounce{  .bounce();  .animation(bounce 1s ease-in-out); } 

を追加するだけです

.box{  .bounceIn();  .animation(bounceIn 1s linear infinite);}

mixin パラメータリファレンス

ps :
· いくつかのパラメータ伝達関数を追加しました。アニメーション振幅パラメータをカスタマイズして、同じ種類のアニメーションの異なる振幅を実現できます。
· パラメータ伝達関数は、上記の元の直接参照には影響せず、パラメータは空にすることができます。アニメーションの振幅はデフォルト値に設定されています

特定のアニメーション名とパラメータの説明🎜 アニメーション名パラメータの説明 栗 .fadeIn(@x ; @y; @n)@x: x 軸の移動距離 (デフォルト値 0); @y: y 軸の移動距離(デフォルト値 0) ; 距離 (デフォルト値 600px); @n: アニメーションフレーム名 (デフォルト値turnInDown).turnInUp(700px;turnInUpA) .turnInLeft(700px;turnInLeftA).turnInRight(700px;turnInRightA)オンライン プレビュー エフェクト http://www.w3cmark.com/animation/

.bounce(@t; @n)	@t: 最小ジッター振幅 (デフォルト値 4px) @n: アニメーション フレーム名 (デフォルト値 バウンス)	.bounce(5px) ; bounceA)
.pulse(@t; @n)	@t: 増幅振幅 (デフォルト値 1.05); @n: アニメーション フレーム名 (デフォルト値 パルス)	.pulse(1.5;pulseA)
.shake(@x; @n)	@x: 最小シェイク振幅 (デフォルト値 10px); @n: アニメーションフレーム名 (デフォルト値シェイク)	.shake(20px; shakeA)
.swing(@d; @n)	@d: 最小回転角度 (デフォルト値 5deg); @n: アニメーションフレーム名 (デフォルト値スイング)	.swing(5deg; slideA)
.wobble( @d; @n)	@d: 最小スイング振幅 (デフォルト値 1deg); @n: アニメーション フレーム名 (デフォルト値 ウォブル)
: x 軸の移動距離 (デフォルト値 0); @n: アニメーション フレーム名 (デフォルト値 フェードイン) .fadeIn (-1000px; 0; fadeInA)		.fadeOut(@x; @y; @n)
	.turnInUp(@p; @n)	@p : 視点の値、要素の距離 ビューの距離 (デフォルト値 600px); @n: アニメーションフレーム名 (デフォルト値turnInUp)
	.turnInLeft(@p; @n)	@p: 視点の値、ビューからの要素の距離 (デフォルト値 600px); @n: アニメーション フレーム名 (デフォルト値turnInLeft)
	.turnInRight(@ p; @n)	@p: 視点の値、ビューからの要素の距離 (デフォルト値 600px); @n: アニメーション フレーム名 (デフォルト値turnInRight)
.turnOutDown(@p; @n)	@p : 視点の値、ビューからの要素の距離 (デフォルト値 600px); @n: アニメーション フレーム名 (デフォルト値turnOutDown)	.turnOutDown(700px; turnOutDownA)
.turnOutUp(@p; @n)	@p: 視点の値、ビューからの要素の距離 (デフォルト値 600px) @n: アニメーション フレーム名 (デフォルト値turnOutUp)	.turnOutUp(700px;turnOutUpA)
.turnOutLeft(@p; @n)	@p: 視点の値、ビューからの要素の距離 (デフォルト値 600px) @n: アニメーション フレーム名 (デフォルト); valueturnOutLeft)	.turnOutLeft(700px;turnOutLeftA)
.turnOutRight(@p; @ n)	@p: 視点の値、ビューからの要素の距離 (デフォルト値 @n);アニメーション フレーム名 (デフォルト値turnOutRight)	.turnOutRight(700px;turnOutRightA)
更新ログ	· 20150110 ターン入口 (出現) とターン出口 (消滅) シリーズのアニメーションを追加	· 20150120 いくつかの新しいアニメーション アニメーション ミックスインスパラメータの受け渡しをサポート