1 概要
2 書式
3 プログラム例1:translateコマンドの例
- 3.1 コード
- 3.2 解説
- 3.3 表示結果
4 プログラム例2:rotateコマンドの例
- 4.1 コード
- 4.2 解説
- 4.3 表示結果
5 プログラム例3:scaleコマンドの例
- 5.1 コード
- 5.2 解説
- 5.3 表示結果

CSSアニメーション終了時に最初の状態に戻らないようにする - CSS

CSSアニメーション終了時に最初の状態に戻らないようにする方法を紹介します。

概要

CSSアニメーション終了時に最初の状態に戻らないようにするためには、CSSのanimation-fill-modeプロパティにforwardsを設定します。

書式

animation-fill-mode: forwards;

プログラム例1:translateコマンドの例

コード

下記HTMLファイルとCSSファイルを作成します。

AnimationFillMode01.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="AnimationFillMode01.css" />
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.getElementById('char01');
      elem.classList.add("charmove");
    }
  </script>
</head>
<body>
  <div class="Field">
    <img id="char01" class="charimg" src="char.svg" />
  </div>
  <button onclick="onButtonClick();">Start</button>
</body>
</html>

AnimationFillMode01.css

body {
  background-color: #F0F0F0;
}

.Field {
  background-color: #FFFFFF;
  border: 1px solid #808080;
  width: 760px;
  height: 320px;
  margin: 2rem 2rem 2rem 2rem;
}

.charimg {
  width: 120px;
}

  .charimg.charmove {
    animation: moveframe 2s linear;
    animation-fill-mode:forwards;
  }


@keyframes moveframe {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(640px);
  }
}

解説

コードの大部分はこちらの記事で紹介している要素を右に移動させるアニメーションです。
.charimg.charmove クラスに animation-fill-mode:forwards; が指定されているため、アニメーション終了後にアニメーション前の状態には戻らない動作になります。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

[Start]ボタンをクリックします。画像が右側に移動するアニメーションが開始します。

右側まで移動しアニメーションが終了します。アニメーションが終了すると、最後の状態の表示となります。

プログラム例2:rotateコマンドの例

コード

下記HTMLファイルとCSSファイルを作成します。

AnimationFillMode02.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="AnimationFillMode02.css" />
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.getElementById('char01');
      elem.classList.add("charmove");
    }
  </script>
</head>
<body>
  <div class="Field">
    <img id="char01" class="charimg" src="char.svg" />
  </div>
  <button onclick="onButtonClick();">Start</button>
</body>
</html>

AnimationFillMode02.css

body {
  background-color:#F0F0F0;
}

.Field {
  background-color:#FFFFFF;
  border: 1px solid #808080;
  width:600px;
  height:280px;
  margin: 2rem 2rem 2rem 2rem;
}

.charimg {
  width:120px;
}

  .charimg.charmove {
    animation: moveframe 2s linear;
    animation-fill-mode: forwards;
  }

@keyframes moveframe {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(180deg);
  }
}

解説

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

[Start]ボタンをクリックします。画像が回転し始めます。

180度回転するとアニメーションが終了します。画面の表示はアニメーション終了時点のままとなります。

プログラム例3:scaleコマンドの例

コード

下記HTMLファイルとCSSファイルを作成します。

AnimationFillMode03.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="AnimationFillMode03.css" />
  <script type="text/javascript">
    function onButtonClick() {
      var elem = document.getElementById('char01');
      elem.classList.add("charmove");
    }
  </script>
</head>
<body>
  <div class="Field">
    <img id="char01" class="charimg" src="char.svg" />
  </div>
  <button onclick="onButtonClick();">Start</button>
</body>
</html>

AnimationFillMode03.cssl

body {
  background-color:#F0F0F0;
}

.Field {
  background-color:#FFFFFF;
  border: 1px solid #808080;
  width:600px;
  height:280px;
  margin: 2rem 2rem 2rem 2rem;
}

.charimg {
  width:240px;
}

  .charimg.charmove {
    animation: moveframe 2s linear;
    animation-fill-mode: forwards;
  }

@keyframes moveframe {
  0% {
    transform: scale(100%);
  }

  100% {
    transform: scale(10%);
  }
}