CSS辞典 animationプロパティ解説
アニメーション関連のプロパティをまとめて指定する「animationプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
目次
対応ブラウザ
| 初期値 | animation-name、animation-duration、animation-delay、animation-play-state、animation-timing-function、animation-fill-mode、 animation-iteration-count、animation-directionプロパティに準じる。 |
| 適用される要素 | すべての要素（::before疑似要素、::after疑似要素を含む） |
| モジュール | CSS Animations Module Level 3 |
| 継承 | なし |
概要・使用方法
{ animation: -name -duration -timing-function -delay -iteration-count -direction -fill-mode -play-state;}「animationプロパティ」はアニメーションをまとめて指定することができます。順番は任意ですが、「animation-durationプロパティ」と「animation-delayプロパティ」を指定する場合は、１つ目が「animation-durationプロパティ」、２つ目が「animation-delayプロパティ」になります。
指定できる値
指定できる値は各プロパティと同じです。それぞれの値は半角スペースで区切りって指定します。
animation-nameプロパティ、animation-durationプロパティの解説
animation-timing-functionプロパティ、animation-delayプロパティ、animation-play-stateプロパティの解説
animation-fill-modeプロパティ、animation-interation-countプロパティ、animation-directionプロパティの解説
以下のCSSプロパティの指定は同じ挙動を示しています。
/* 各プロパティで個別指定 */
{
animation-name: animation1;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-fill-mode: forwards;
animation-play-state: running;
}
/* animationプロパティで一括指定 */
animation: animation1 2s ease-in-out 1s infinite alternate-reverse forwards running;サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>animationプロパティ、animation-direction: reverseプロパティCSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
@keyframes animation1{
0% {width: 10px; background-color: red;}
50% {width: 200px;height: 10px; background-color: blue;}
100% {width: 400px;height: 10px; background-color: red;}
}
.animation-box1{position:relative;}
.animation-box2{
width: 400px;
height: 60pox;
}
.animation-box-bar{
width: 10px;
height: 10px;
position:absolute;
top:50px;
opacity:0.3;
animation: animation1 2s ease-in-out 1s infinite alternate-reverse forwards running;
}
</style>
</head>
<body>
<div class="animation-box1">
<h1 class="animation-box2">夏の危険生物1</h1>
<div class="animation-box-bar"></div>
</div>
<p>夏の危険な生物クラゲといわれる動物。</p>
</body>
</html>実行結果
夏の危険生物1
夏の危険な生物クラゲといわれる動物。