css3アニメーションプロパティのTransitionsプロパティとAnimationsプロパティの機能の実装

不言

リリース： 2018-08-24 10:59:43

オリジナル

1796 人が閲覧しました

この記事の内容はCSS3アニメーション属性のTransitions属性とAnimation属性の機能実装についてです。必要な方は参考にしていただければ幸いです。

1 トランジション機能

(1) サポートされているブラウザ:

これまで: Safari3.1 以降、Chrome8 以降、Firefox4 以降、Opera10 以降、IE11 以降のブラウザがこの機能をサポートしています。

(2) 機能

CSS3では、Transitions機能は、指定された時間内に要素の属性をある属性値から別の属性値に滑らかに遷移させるアニメーション機能を実現します。

(3)

transition:propertydurationtiming-function

propertyの使い方

property:どのプロパティをスムーズに遷移させるかを示します。

duration: 属性のスムーズな移行が完了するまでにかかる時間を示します。

timing-function: スムーズな移行を行うためにどのような

メソッド

が使用されるかを示します。

div{
background-color：#ffff00;
transition：background-color 1s linear;//在1秒内让div元素的背景色从黄色平滑过渡到浅蓝色。
}
div{
background-color：#00ffff；
}

ログイン後にコピー

(4)

transition-property：background-color；
transition-duration：1；
transition-timing-function：linear；

ログイン後にコピー

の別の使用方法 (5) トランジション遅延属性

は、変形アニメーション特殊効果

delay

の実行を開始する時間を指定します。プロパティ値は秒またはミリ秒で指定できます。

transition-delay：1s；
//或 transition：background-color 1s linear 2s；（在第四个参数中书写延迟时间）

ログイン後にコピー

(6) トランジション機能を利用して複数の属性値を同時に滑らかに遷移

transition：background-color 1s linear，color 1s linear，width 1s linear；

ログイン後にコピー

(7) 移動や回転などのアニメーション効果

img{
position：absolute；top：70px；left：0；
transform：rotate（0deg）；
transition：left 1s linear，transform 1s linear；
}
 img：hover{
left：30px；
transform：rotate（720deg）；
}

ログイン後にコピー

(8) デメリット開始点しか指定できない属性の値と終了値、そしてこれら 2 つの属性値の間で滑らかな遷移が実現されますが、より複雑なアニメーション効果は実現できません。

2 アニメーション機能

(1) サポートされているブラウザ:

これまで: Safari4 以降、Chrome2 以降、Firefox20 以降、Opera18 以降、IE11 以降のブラウザがこの機能をサポートしています。

(2)関数はTransitions関数と同じで、どちらも要素の属性値を変更することでアニメーション効果を実現します。

の違い: アニメーション機能は、複数のキーフレームを定義し、各キーフレーム内の要素の属性値を定義することにより、より複雑なアニメーション効果を実現します。

(3)

キーフレームのコレクションを作成する

@keyframes キーフレームコレクション名{キーフレームを作成するコード}

(4)

キーフレームを作成するコード

(以下と同様)

40%{このキーのスタイルフレーム内のコード} (40% は、変更されたフレームがアニメーションプロセス全体の 40% に位置し、開始フレームが 0%、終了フレームが 100% であることを意味します)

@keyframes mycolor{
0%{
background-color：red;
}
40%{
background-color：darkblue;
}
70%{
background-color：yellow;
}
100%{
background-color：red;
}
}

ログイン後にコピー

(5)

これを使用します要素のスタイルキーフレームのコレクション

div{
animation-name：my-color； //指定关键帧集合的名称
animation-duration：5s； //指定完成整个动画所花费的时间
animation-timing-function：linear； //指定实现动画的方法
}

ログイン後にコピー

(6) その他の属性

animation-delay: アニメーションを開始する前に何秒またはミリ秒を遅延させるかを指定するために使用されます。

animation-direction: アニメーションの実行方向を指定するために使用されます。指定できる属性値は以下のとおりです。
normal：初期値（アニメーション実行後に初期状態に戻ります）
alternate：アニメーションの実行方向を交互にします
reverse：アニメーションを実行します逆方向

alternate -reverse: アニメーションの実行方向を逆方向から交互に変更します

(7) スタイルコード行でアニメーションアニメーションを定義する場合は、以下の記述方法を使用します

animation : キーフレームの名前、アニメーションの実行時間、アニメーションの実装方法アニメーションの実行を何秒遅らせるか。アニメーションの実行方向。 ) 複数の属性値が同時に変化するアニメーションを実現するには

🎜これらの属性値を各キーフレームに同時に指定するだけです。 🎜

3 实现动画的方法

方法	属性值的变化速度
linear	在动画开始时与结束时以同样速度进行改变
ease-in	动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out	动画开始时速度很快，然后速度沿曲线值进行放慢
ease	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

4 实现网页的淡入效果

通过在开始帧与结束帧中改变页面的opacity属性的属性值来实现页面的淡入效果。

@keyframes fadein{
0%{
opacity：0；
background-color：white;
}
100%{
opacity：1；
background-color：white;
}
body{
animation-name： fadein； 
animation-duration：5s； 
animation-timing-function：linear； 
animation-iteration-count：1；
}

ログイン後にコピー