CSS - animation-name

概要

属性名 animation-name
値 <single-animation-name> [, <single-animation-name> ]*
値の詳細 <single-animation-name> = none | <string>
初期値none
適用可能要素すべての要素 (::before, ::after を含む)
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3105(-moz)
16		4(-webkit)
43		15(-webkit)
30		4(-webkit)
9

説明

適用するアニメーションのフレーム定義を、@keyframes で定義した名前で指定します。アニメーションに関する概要は animation を参照してください。

値説明
noneアニメーションを指定しません。
<string>@keyframes で定義したフレーム名を指定します。

使用例

CSS
@keyframes myframe {
  from {
    color: #66f;
    font-size: 20pt;
  }
  to {
    color: #f66;
    font-size: 24pt;
  }
}
.test {
  position: absolute;
  animation-name: myframe;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}
HTML
<div class="test">A</div>
表示
A

関連項目

@keyframes, animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

リンク

Copyright (C) 2015 杜甫々
初版：2015年11月29日、最終更新：2015年11月29日
https://www.tohoho-web.com/css/prop/animation-name.htm