新登場！ 44ページの電子書籍「CSSを44分でマスター」がリリースされました！ 😃

今すぐ入手 →

#animation-name

使用するアニメーションキーフレームを定義します。

デフォルト animation-name: none;

アニメーション名が指定されていない場合、アニメーションは再生されません。

animation-name: fadeIn;

名前が指定されている場合、その名前に一致するキーフレームが使用されます。

例えば、fadeInアニメーションはこのようになります

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

animation-name: moveRight;

別の例：moveRightアニメーション

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}