ホームページ > 記事 > ウェブフロントエンド > css3アニメーションプロパティのTransitionsプロパティとAnimationsプロパティの機能の実装
この記事の内容はCSS3アニメーション属性のTransitions属性とAnimation属性の機能実装についてです。必要な方は参考にしていただければ幸いです。
(1) サポートされているブラウザ:
これまで: Safari3.1 以降、Chrome8 以降、Firefox4 以降、Opera10 以降、IE11 以降のブラウザがこの機能をサポートしています。
(2) 機能
CSS3では、Transitions機能は、指定された時間内に要素の属性をある属性値から別の属性値に滑らかに遷移させるアニメーション機能を実現します。
(3)
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); }
(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 : キーフレームの名前、アニメーションの実行時間、アニメーションの実装方法 アニメーションの実行を何秒遅らせるか。アニメーションの実行方向。 ) 複数の属性値が同時に変化するアニメーションを実現するには
🎜これらの属性値を各キーフレームに同時に指定するだけです。 🎜方法 | 属性值的变化速度 |
linear | 在动画开始时与结束时以同样速度进行改变 |
ease-in | 动画开始时速度很慢,然后速度沿曲线值进行加快 |
ease-out | 动画开始时速度很快,然后速度沿曲线值进行放慢 |
ease | 动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢 |
ease-in-out | 动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢 |
通过在开始帧与结束帧中改变页面的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; }
相关推荐:
css3动画属性animation(动画)_html/css_WEB-ITnose
CSS3展现精彩的动画效果 css3的动画属性_html/css_WEB-ITnose
以上がcss3アニメーションプロパティのTransitionsプロパティとAnimationsプロパティの機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。