軽量かつ高性能なCSS3アニメーションライブラリ

簡単なチュートリアル

Repaintless.css は軽量で高性能な CSS3 アニメーション ライブラリです。 Repaintless.css は特別なメソッドを使用してページの再描画を行わずに要素をアニメーション化するため、他の CSS アニメーション ライブラリよりもパフォーマンスが高くなります。 Repaintless.css は bower または npm を通じてインストールできます。

$ bower install repaintless
$ npm install repaintless

使い方

このCSS3アニメーションライブラリを使用するには、repaintless.cssファイルをページに導入する必要があります。

<link href="path-to-css-directory/repaintless.css" rel="stylesheet"></link>

HTML 構造

要素をアニメーション化するには、その要素に element-animated を追加するだけです。 class、これは追加する必要がある class クラスです。次に、2 番目のクラス クラスを使用して、必要なアニメーション タイプを指定します。

<p class="element-animated tremble"> I tremble! </p>

アニメーション時間はデフォルトで1秒です。アニメーション時間を短いクラスまでは 0.5 秒、長いクラスでは 2 秒として指定できます。無限アニメーションを実行する必要がある場合は、無限を追加できます クラス。

<p class="element-animated slide-from-top short">
  I am quick! 
</p>
 
<p class="element-animated slide-from-top long"> 
  I am slooow... 
</p>
 
<p class="element-animated slide-from-top infinite"> 
  I will do that forever to drive you crazy! 
</p>

Animation Types

Repaintless.cssで利用可能なすべてのアニメーションタイプは次のとおりです。アニメーションによっては、永遠にループするアニメーションもあります。

上からスライド

下からスライド

左からスライド右からスライド

下

右から乗る-上

スライド-左から下

スライド左から上

スライド上-下（ループ）

スライド左-右（ループ）

震える（ループ）

フェードイン

フェードアウト

脈動する（ループ）

回転

Painless.css アニメーション ライブラリ github アドレスは: https:/ /github.com/szynszyliszys/repaintless

以上が軽量かつ高性能なCSS3アニメーションライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。