CSSでアニメーションを作る一般的なテクニックを解説した記事（コレクション）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSでアニメーションを作る一般的なテクニックを解説した記事（コレクション）

奋力向前

Sep 16, 2021 am 09:29 AM

css

前回の記事「知っておきたい高度なJSスキル（まとめ）」では、高度なJSスキルについて学びました。次の記事では、CSS を使用してアニメーションを作成するための一般的なテクニックを紹介しますので、一緒に見てみましょう。

CSSでアニメーションを作る一般的なテクニックを解説した記事（コレクション）

transition

CSS には transition プロパティがあり、特定の CSS プロパティの変更を監視でき、単純なアニメーション効果を実現するには、プロパティ変更コントロールを渡します。

transition CSS プロパティは、transition-property、transition-duration、transition-timing-function、transition-delay の短縮形プロパティです。 ——MDN より引用

html code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background: #000;
        border-radius: 4px;
        /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
        transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
      }
      .box:hover {
        width: 400px;
        color: #000;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div>
      <div>鼠标悬浮查看效果</div>
    </div>
  </body>
</html>

アニメーション効果ここをクリックしてアドレスを表示 https://codepen.io/wjq990112/pen/PoqEemX

体験後に使い方を詳しく話しましょう:

cssコード

transition: transition-property | transition-duration |
  transition-timing-function | transition-delay;

こんな風に書くと理解できないかも知れません

css code

transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */
transition-duration: 1s; /* 设定过渡动画的时长 */
transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */
transition-delay: 0.2s; /* 设定触发动画的延迟 */

transition 属性は、上記の 4 つの CSS 属性で構成されています。

最初と 2 番目の属性は必須で、トランジションアニメーションを追加し、アニメーションの継続時間を指定する必要があるリスニング属性を指定するために使用されます。

3 番目と 4 番目のプロパティはオプションで、トランジションアニメーションの効果と遅延を設定するために使用されます。

transition-timing-function のオプションの値については、

https://developer.mozilla.org/zh-CN/docs/Web/CSS で詳しく説明されています。 /transition-timing-function

最初の属性にも 2 つの特別な値があります。 none: どの属性もリッスンしません all: すべての属性をリッスンし、それらにトランジションアニメーションを追加します。

3 番目の属性が省略された場合、2 回目の項目はアニメーション効果の遅延として自動的に解析されます。

まだ理解するのが少し難しいので、例を挙げてみましょう:

css コード

transition: 背景 1sイーズインアウト 0.2s;

上記の例は、前のコードの一部です。

は、background の変更をリッスンし、それに 1 秒間のトランジションアニメーションを追加することを意味します。トランジションアニメーションの効果は、ゆっくりと始まり、ゆっくりと終わることであり、実行が開始されるだけです。属性が 0.2 秒間変化した後。

次に、上記のコードのこの段落:

css コード

.box {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #000;
  border-radius: 4px;
  /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
  transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
  width: 400px;
  color: #000;
  background: #fff;
}

コード内の transition 属性は background``color` です。 `width はトランジションアニメーションを追加します。class=box タグのこれら 3 つの属性が変更されると、デフォルトまたは指定されたアニメーション効果が自動的に追加されます。

次に、これを高度な使用法に使用します。

アニメーションを実装するプロセスでは、一般的なメソッドを使用する必要がある場合があります: overflow 目隠し。

Tab スイッチングに似たいくつかの効果を実現するために使用されます:

html コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        width: 100px;
        height: 100px;
        overflow: hidden;
      }
      #tabs {
        display: flex;
        width: 200px;
        height: 100px;
        transition: transform 0.3s;
      }
      .tab-pane-1 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: red;
      }
      .tab-pane-2 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: yellow;
      }
      .transform {
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <div>
      <div id="tabs">
        <div>1</div>
        <div>2</div>
      </div>
    </div>
    <button onclick="switchTabPane()">切换Tab</button>

    <script>
      function switchTabPane() {
        var el = document.getElementById(&#39;tabs&#39;)
        el.className = el.className ? &#39;&#39; : &#39;transform&#39;
      }
    </script>
  </body>
</html>

アニメーション効果ここをクリックして https:// を表示しますcodepen.io/wjq990112/pen/MWwrXWo

この効果を実現するには、コンテナを overflow: hidden; に設定し、次に tab を設定するだけです。コンテナ内の transform 属性をリッスンし、transform:transformX() を使用して #XX 軸方向に移動すれば完了です。

また、ブラウザ平面上で回転するために

transform:rotateZ(); を使用して実現できる回転効果もいくつかあります。デフォルトでは、中心点として幾何学的中心を使用して回転します。。

animation & keyframes

animation 属性の使い方は transition と似ていますので、次に詳しく紹介します。

アニメーション CSS プロパティは、animation-name、animation-duration、animation-timing-function、animation-lay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play です。 -state 属性の短縮形の属性形式。

最初に、簡単な回転効果を作成して体験します:

html code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes rotate {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(359deg);
        }
      }
      .rotate {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        background: red;
        /* 为元素设定 10s 的旋转动画 */
        animation: rotate 10s linear infinite;
      }
      .wrapper {
        display: flex;
        width: 200px;
        height: 200px;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div>
      <div>旋转</div>
    </div>
  </body>
</html>

アニメーション効果ここをクリックして https:// codepen を表示します。 .io/wjq990112/pen/mdJXeqm

これは基本的な回転アニメーションで、アニメーションの CSS プロパティを作成するためによく使用される

animation と keyframes の 2 つを使用します。

アニメーション

基本的な使い方について話しましょう:

cssコード

animation: animation-name | animation-duration | animation-timing-function |
  animation-delay | animation-iteration-count | animation-direction |
  animation-fill-mode | animation-play-state;

まだ全然理解できていません引き続き、1 つずつ分解して説明します。

css コード

animation-name: rotate; /* 自定义 keyframes 名 */
animation-duration: 10s; /* 设定单次过渡动画时长 */
animation-timing-function: linear; /* 设定单次过渡动画效果 */
animation-delay: 0s; /* 设定单次过渡动画延迟时间 */
animation-iteration-count: infinite; /* 设定过渡动画执行次数 infinite 表示无限循环 */
animation-direction: normal; /* 设定过渡动画方向 可对奇数偶数次动画分别设定 */
animation-fill-mode: none; /* 设定过渡动画的填充模式 */
animation-play-state: running; /* 设定过渡动画运行或停止 */

ほとんどの属性は理解しやすいと思いますが、理解できる属性は 2 つだけです。理解するのがさらに難しくなります。

animation-direction と animation-fill-mode は、理解するのが最も難しい 2 つのプロパティであると言えます。詳しく説明しましょう:

css code

/*
 *	normal: 按照 keyframes 设定的动画方向运行
 *	reverse: 按照 keyframes 设定的动画方向的反方向运行
 *	alternate: 先按照 keyframes 设定的动画方向运行 运行结束后再反方向运行
 *	alternate-reverse: 先按照 keyframes 设定的动画方向的反方向运行 运行结束后再正向运行
 */
animation-direction: normal | reverse | alternate | alternate-reverse;
/*
 *	none: 不设定填充模式 默认在动画开始及结束时都停留在动画未开始的状态
 *	forwards: 动画结束后停留在动画的最后一帧
 *	backwards: 动画开始前停留在动画的第一帧
 *	both: 动画开始前和动画结束后分别停留在动画的第一帧和最后一帧
 */
animation-fill-mode: none | forwards | backwards | both;

この 2 つのプロパティは最も理解するのが難しいと言えますが、設定後の効果を確認したい場合は、

MDN にアクセスしてください。

キーフレーム

簡単なアニメーション制作を学んだ学生は、この CSS プロパティを理解しておく必要があると思います。非常に単純で、キーフレームです。

アニメーションのキーフレームを設定すると、CSS がそのモーションパスを自動的に塗りつぶします。

CSSコード

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(359deg);
  }
}

上面这段代码，就是为设定了animation属性的div标签创建了两个关键帧，一个是动画起始位置的样式，另一个是动画结束位置的样式，CSS将自动填充动画的过程（即旋转 359 度）。

不仅仅可以设置开始和结束的位置（0%可以使用from关键字代替，100%可以使用to关键字代替），还可以在动画的运行过程中插入关键帧，例如33%，50%，66%等等，CSS会按照关键帧的样式，对动画进行自动填充。

通常情况下，keyframes会与animation配合使用。

讲完了animation和keyframes的用法，我们来看一道面试题，来自本人 2020 年某跳动实习生招聘一面：

请你使用 CSS 实现一个方块来回移动，无限循环。

这个题目其实有 2 种做法，但是原理都是一样的，这里就不放 HTML 代码了，直接放 CSS 的部分：

/*
 *	①
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 1s linear infinite;
}
/*
 *  ②
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 0.5s linear infinite alternate;
}

推荐学习：CSS视频教程

以上がCSSでアニメーションを作る一般的なテクニックを解説した記事（コレクション）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は掘金で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

2つの画像とAPI：製品のリクロッキングに必要なすべてApr 15, 2025 am 11:27 AM

最近、製品画像の色を動的に更新するソリューションを見つけました。したがって、製品の1つだけで、私たちはそれをさまざまな方法で色付けすることができます

毎週のプラットフォームニュース：サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響Apr 15, 2025 am 11:19 AM

今週のラウンドアップでは、灯台はサードパーティのスクリプトに光を当て、安全なリソースが安全なサイトでブロックされ、多くの国の接続速度がブロックされます

独自の非JavaScriptベースの分析をホストするためのオプションApr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

それはすべて頭の中にあります：Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するApr 15, 2025 am 11:01 AM

ドキュメントヘッドはウェブサイトの中で最も魅力的な部分ではないかもしれませんが、それに入るものは間違いなくあなたのウェブサイトの成功にとってそれと同じくらい重要です

JavaScriptのsuper（）とは何ですか？Apr 15, 2025 am 10:59 AM

子のクラスでsuper（）？を呼び出すJavaScriptを見たときに何が起こっているのか、Super（）を使用して親のコンストラクターとSuperを呼び出します。そのアクセス

さまざまな種類のネイティブJavaScriptポップアップを比較しますApr 15, 2025 am 10:48 AM

JavaScriptには、ユーザーインタラクション用の特別なUIを表示するさまざまな内蔵ポップアップAPIがあります。有名：

アクセス可能なWebサイトが構築が難しいのはなぜですか？Apr 15, 2025 am 10:45 AM

先日、私は多くの企業がアクセス可能なウェブサイトを作るのに苦労している理由について、フロントエンドの人々とおしゃべりをしていました。アクセス可能なWebサイトがとても難しいのはなぜですか

「隠された」属性は目に見えて弱いですApr 15, 2025 am 10:43 AM

あなたがそれがすべきだと思うことを正確に行うHTML属性があります：

See all articles

ホットAIツール

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。