Shift.cssを使用して完全にアニメーション化されたウィジェットを作成する

Webアニメーション 方法を提供します 人々の注目を集める そして さらに描く ウェブサイトに。そこにはたくさんのツールがあります 無料のアニメーションを作成する しかし Shift.css 束の最新の一つです。.

それは 無料のオープンソースフレームワーク 作成するために作られた 任意のコンテナ内の動的アニメーション. そしてこれらのアニメーション 1つのシーケンスにロックされていません. あなたは実際にカスタムアニメーションを作ることができます 各要素 ブロック内でこれらを適用する ある順序で.

の デモページを移動する 私が言葉で説明できるよりもずっと上手にあなたを見せることができる.

あなたが気付くことの一つは、コンテナ内の各要素は 別のHTML要素. SVGであろうと画像であろうとなかろうと、あなたは全部を別々にアニメートすることができます。 独自のカスタムアニメーション効果を作成する.

ライブラリには2つのファイルがあります。 .CSS そして .js ライブラリ、そして両方である必要があります あなたのドキュメントヘッドに追加しました.

このプロジェクトのGitHubレポジトリが見つからないため、次の操作を行う必要があります。 ファイルを直接ダウンロードする Shift.css Webサイトから.

次のステップは コンテナ要素を定義する いくつかの内容で。クラス名は重要なので、すべてのアニメーション要素は クラスがある .シフト要素 適用された.

これらのクラスと一緒に、あなたもできます HTML5データ属性を追加する アニメーションのしくみを定義します。今は3つしかありませんが、フルアニメーション効果をカスタマイズするのに十分なはずです。.

1. データアニメーション：アニメーションの名前
2. データ遅延：アニメーション開始までの総遅延（秒）
3. データ期間：アニメーションの全長（秒）

アニメーションの名前は 定義済みのアニメーション Shiftライブラリ用に作成されています。今があります 15のアニメーション名から選択. あなたはそれらがShift.cssホームページの一番下にリストされているのを見ることができます.

ただ コピーペースト あなたが望むものなら、なんでも アニメーション名の設定に そして、あなたは行ってもいいはずです！たとえば、exitフェードアニメーションを使用したい場合は、追加します。 data-animation = "shift_exitFade" どのような要素をそのようにアニメートするかに対するデータ属性として。やさしい.

このライブラリにJavaScriptのオプションが追加されたことを願います。開発者が配置や機能をより自由に制御できるようになるからです。しかし、単純な（そして無料の）アニメーションフレームワークでは、文句を言うことはできません。.

Shift.cssはに最適です 新しい開発者 作成したい人 より複雑なアニメーションスタイル 冗長なコードを最初から書かずに.