CSS3アニメーションとJSアニメーションの違い JSはフレームアニメーションを実装します
遷移 トランジションは、アニメーションの簡易版とも言えるシンプルなアニメーション属性です。通常はイベントトリガーで使用され、シンプルで使いやすいです。 遷移プロパティ値
トランジション機能 遷移はイベントによってトリガーされる必要があります (ホバー疑似クラスの追加など)。遷移は、ページが読み込まれたときに 1 回だけ自動的に発生することはなく、繰り返しトリガーされない限り繰り返し発生することもありません。状態は開始と終了の 2 つだけです。遷移ルールは 1 つの属性のみを定義できます。 <本文> <div> </div> </本文> <スタイル> 。箱 { 高さ: 100px; 幅: 100ピクセル; 背景色: ライトピンク; 遷移: 幅 1 秒、イーズイン アウト 0.5 秒。 } .box:ホバー{ 幅: 200ピクセル; } </スタイル> 効果は以下のとおりです
.box:ホバー{ 幅: 200ピクセル; 遷移: 幅 1 秒、イーズイン アウト 0.5 秒。 } 実際、ホバー時に書き込むことも可能ですが、要素から移動すると、遷移なしで要素の幅がすぐに復元されます。 アニメーション アニメーションプロパティ値
<本文> <div> </div> </本文> <スタイル> 。箱 { 高さ: 200px; 幅: 200ピクセル; アニメーション: 3 秒タイプ順方向交互に無限; アニメーション再生状態: 実行中; } .box:hover { アニメーション再生状態: 一時停止; } @キーフレームタイプ{ から { 背景: 黄緑 } 50% { 背景: 黄色 } に { 背景: アクアマリン } } </スタイル> マウスが内側に移動する時に一時停止し、マウスが外側に移動する時に色の変更を続けます 変身 まず、transform属性は静的属性であることに注意してください。スタイルに書き込まれると、直接表示され、アニメーションプロセスには表示されません。transform属性を使用すると、要素を移動(translate)、拡大縮小(scale)、回転(rotate)、反転(skew)できます。詳細なパラメータについては、CSS3 transform属性を参照してください。 要約する
以上がアニメーションとトランジションの違いについての詳しい内容です。アニメーションとトランジションについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください! |
<<: WeChatアプレットで数字当てゲームを実装する実際のプロセス
>>: Linux システムでの Selenium クローラー プログラムの導入の概要
この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...
SQLはテーブル内の重複レコードをすべて見つけます1. テーブルには id と name の 2 つ...
MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...
Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...
目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...
jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...
Nginx (「エンジン エックス」と発音) は、インターネット上の最大規模のサイトの負荷を処理す...
sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...
ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...
何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...
HTMLコード: <a onclick="goMessage();" st...
概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...
mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...