CSS - animation-duration

トップ > CSSリファレンス > animation-duration

概要

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

サポート (説明)

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

説明

1回のアニメーションにかける時間を 0.5s などの時間で指定します。アニメーションに関する概要は animation を参照してください。

説明
<time>1回のアニメーションにかける時間を指定します。

使用例

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日
http://www.tohoho-web.com/css/prop/animation-duration.htm