CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSアニメーション入門：animation-durationプロパティで再生時間を指定する方法

CSSアニメーションにおいて、animation-durationプロパティは、アニメーションが1サイクルを完了するまでにかかる時間を指定するために使用します。値には秒（s）またはミリ秒（ms）を指定でき、初期値は「0s」です。

なお、このプロパティはanimation-nameプロパティと組み合わせて使うのが一般的です。animation-durationが指定されていない場合、アニメーションは即座に完了してしまうため注意しましょう。

基本構文

animation-duration: 時間;

例えば「3s」と指定すれば3秒、「500ms」と指定すれば0.5秒かけてアニメーションが1回再生されます。

サンプルコード

以下のコードは、赤いボックスが2秒かけて右へ移動しながら色が変化するアニメーションの実装例です。animation-durationプロパティの動作を確認できます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 200px;
        position: relative;
        background: red;
        animation-name: myanim;
        animation-duration: 2s;
      }
      @keyframes myanim {
        from {left: 0px; background-color: green;}
        to {left: 200px; background-color: blue;}
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

ポイントまとめ

  • animation-duration：アニメーション1回分の再生時間を指定する
  • 単位はs（秒）またはms（ミリ秒）で指定する
  • 初期値は0sのため、必ず明示的に設定するのがおすすめ
  • @keyframesで定義したアニメーションとセットで使用する
  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります