css の初体験Animation_html/css_WEB-ITnose

GIF、SVG、WebGL、ビデオ背景、その他の形式で表示されるかどうかにかかわらず、アニメーションを使用する Web サイトがますます増えています。アニメーションを適切に使用すると、Web サイトがより活発でインタラクティブになり、ユーザーにフィードバックとエクスペリエンスが追加されます。

このチュートリアルでは、ブラウザーのサポートの向上に伴いますます人気が高まっている CSS アニメーションについて紹介します。CSS アニメーションは、いくつかの機能で高いパフォーマンスを発揮します。基本を説明した後、長方形が円に変わるアニメーションの簡単な例を作成します。

ここでデモをご覧ください

@keyframes とアニメーションの概要

CSS アニメーションの主なコンポーネント: @keyframes、アニメーションを作成するための CSS ルール。 @keyframes はアニメーション ステップのタイムラインと考えてください。 @keyframes では、これらのステップをそれぞれ異なるスタイル ステートメントで定義できます。

2 番目のステップは、CSS アニメーションの実行を有効にすることです。セレクターを @keyframes にバインドする必要があります。これらの手順に基づいて、@keyframes によって宣言されたすべてのコードが解析され、新しいスタイルが初期化されます。

@keyframes

ここでアニメーションのステップを設定します。 @keyframes のプロパティは次のとおりです:

セレクターの名前 (この例では tutsFade)

ステップ: 0%-100% ; from (0% に等しい) と to (100% に等しい)。

CSS スタイル: 各段階で適用されるスタイル。

例:

@keyframes tutsFade {

0% {

opacity: 1;

}

100% {

不透明度: 0 ;

}

}

または:

@keyframes tutsFade {

from {

不透明度: 1 ;

}

から {

不透明度: 0 ;

}

}

略語:

@keyframes tutsFade {

to {

不透明度: 0 ;

}

}

上記のコードは、要素に不透明度の遷移を適用します。 、不透明度: 1 から不透明度: 0 まで。上記の 3 つの方法は同じ効果を実現します。

アニメーション

animation 属性:

animation-name: @keyframes 名 (この場合は tutsFade).

animation-duration: 時間間隔、開始から終了までのアニメーションの合計長さ

anime-timing-function: アニメーション速度を設定します (linear |ease |ease-in |ease-out |ease-in-out | cubic-bezier)。

animation-delay: アニメーションが開始する前の遅延。

animation-iteration- count : アニメーション中に反復する回数

animation-direction: ループの方向を、開始から終了、終了から開始、またはその両方に変更します。

animation-fill-mode: 要素を指定します。アニメーションの終了 適用されたスタイル (なし | 前方 | 逆方向 | 両方)。 s;

アニメーション反復数: 無限;

アニメーション方向: 代替;

.element {

アニメーション: tutsFade 4 s 1 s 無限線形代替 ;

}

上記のコードは、点滅効果、1 秒のアニメーション遅延、4 秒のアニメーション間隔、交互の方向、および無限の線形ループ反復を作成します。最良のブラウザサポートを確保するには、ブラウザ固有のプレフィックスを使用する必要があります。標準プレフィックス アプリケーション:

Chrome & Safari: -webkit-

Firefox: -moz-

Opera: -o-

Internet Explorer: -ms-

动画属性使用了浏览器前缀的形式：

.element {

     -webkit-animation: tutsFade 4 s 1 s infinite linear alternate;

     -moz-animation: tutsFade 4 s 1 s infinite linear alternate;

     -ms-animation: tutsFade 4 s 1 s infinite linear alternate;

     -o-animation: tutsFade 4 s 1 s infinite linear alternate;

     animation: tutsFade 4 s 1 s infinite linear alternate;

}

@keyframes的前缀使用：

@-webkit-keyframes tutsFade { /* your style */ }

@-moz-keyframes tutsFade { /* your style */ }

@-ms-keyframes tutsFade { /* your style */ }

@-o-keyframes tutsFade { /* your style */ }

@keyframes tutsFade { /* your style */ }

 

更多浏览器前缀： http://css3please.com/

 

多动画

使用逗号分割添加多动画。为tutsFade 元素添加回转，我们要声明一个额外的@keyframes然后绑定到元素上：

.element {

   animation: tutsFade 4 s 1 s infinite linear alternate, tutsRotate 4 s 1 s infinite linear alternate;

}

@keyframes tutsFade {

   to {

     opacity: 0 ;

   }

}

@keyframes tutsRotate {

   to {

     transform: rotate( 180 deg);

   }

}

 

------------------------------------分割线--------------------------------------------------------------------

矩形变圆形实例

这个例子中总共有五个步骤，每个步骤将为元素定义一个圆角，一个回转和不同的背景色，下面是实现的步骤和代码。

基本元素

首先创建一个标记，动画的元素。甚至不用class，仅仅只用一个div:

次に、要素選択を使用して div にスタイルを追加します:

width : 200px ;

height : 200px ;

キーフレームを宣言する

キーフレームを定義する@keyframes は square-to-circle という名前で、その 5 つのステップは次のとおりです:

@keyframes square-to-circle {

0% {}

25% {}

50% {}

75% { }

100% {}

}

ステップごとにいくつかのスタイルを定義する必要があり、長方形の各角の丸い角の定義を開始します:

@-webkit-keyframes square-to-circle {

0% {

境界半径: 0 0 0 0 ;

}

25% {

境界半径: 50% 0 0 0 }

境界半径: 50% 50% 0 0 ;

}

75% {

50% 50% 50% 50% 0;

}

100% border-radius: 50% }

}

次に、ステップごとに異なる背景を定義します色:

@keyframes square-to-circle {

0% {

境界半径: 0 0 0 0;

背景:コーラル

}

境界半径: 50% 0 0 0 ;

背景 :darksalmon;

}

50% {

境界半径: 50% 50% 0 0 ;

背景 :indianred;

境界線 - 半径: 50% 50 % 50% 0 ;

背景:lightcoral

}

100% {

背景: darksalmon;

}

DIV を回転させます。

@keyframes square-to-circle {

0% {

境界半径: 0 0 0 0 ;

背景:サンゴ;

transform:rotate( 0 度);

}

25% {

境界半径: 50% 0 0 0 ;

背景 :darksalmon;

transform:rotate( 45 度);

}

50% {

境界半径: 50% 50% 0 0 ;

背景 :indianred;

transform:rotate( 90 度);

}

75% {

境界半径: 50% 50% 50% 0 ;

背景:ライトコーラル;

変換:回転(135 度);

}

100% {

境界半径: 50% ;

背景 :darksalmon;

変換:回転(180 度);

}

}

应用アニメーション画

定义了square-to-circleアニメーション画後、必要将它应用到div上：

div {

width : 200px ;

高さ: 200px ;

背景色 : コーラル;

アニメーション: 正方形から円へ 2 秒 1 秒の無限交互。 

}

上面使用简写的アニメーション属性，它们的状態态：

アニメーション画名：square-to-circle.

アニメーション画间間隔：2s.

アニメーション画延迟：1s.

アニメーション画循環次数是制限はありません。

アニメーションの進行方向は交互であり、最初に開始から終了まで、次に最初に戻り、その後終了まで循環します。

Timing-Function を使用します

アニメーション追加の最後のプロパティは、animation-この関数は、非常に詳細な値の手動計算である可能性がありますが、タイミング関数がソースとオンライン設定を提供するための無料のウェブサイトが数多くあります。アニメーション ツール、私たちの定時機能を計算します。

高さ: 200px ;

背景色 : コーラル;

アニメーション: 正方形から円へ 2 s 1 s 無限 3 次ベジェ( 1 ,. 015 ,. 295 , 1.225 ) 交互。 

}

ブラウザー接頭辞 ( -webkit- 、 -moz-、 -ms-、 -o- ) を使用しない場合の最終コードは次のとおりです。

div {

width: 200px

height: 200px;背景色: コーラル;

アニメーション: 正方形から円 2 秒 . 5 秒 無限立方体ベジェ ( 1 ,. 015 ,. 295 , 1.225 ) 代替;

@keyframes円 {

0% {

25% {

境界半径: 50% 0 0 0 ;

背景:darksalmon;

変換:回転(45 度) }

50% {

境界半径: 50% 50% 0 0 ;

背景 :indianred;

変換: 回転(90 度) }

75% {

境界半径: 50% 50% 50% 0;

背景:ライトコーラル;

変換:回転( 135 度) }

100 % {

境界半径: 50%;

変換: 回転( 180 度) g);

}

}

最後に

最新のブラウザではすべてが正常に動作しますが、Firefox でのオブジェクトのレンダリングは少し不安定で、エッジがギザギザに見えます:

幸いなことに、回避策があります。 div に透明なアウトラインを追加すると、Firefox は完全にレンダリングします。

アウトライン: 1 ピクセルのソリッド透明;