CSS - animation-delay

概要

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

サポート (説明)

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

説明

アニメーションを開始する時間を <time> で指定した時間分遅延させます。アニメーションに関する概要は animation を参照してください。

値説明
<time>アニメーション開始の遅延時間を 1.5s(1.5秒)や 300ms(300ミリ秒)など時間を示す値で指定します。

使用例

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: 1.5s;
  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-delay.htm