CSS animation-direction| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

animation-direction CSS プロパティとは

トピック：アニメーションを再生の向きを順方向、逆方向、前後反転で再生するかどうかを指定する事ができる

プロパティ アニメーション方向

実例 コード 1

サンプル コードを試す
  • .webref {
  • width: 50px;
  • height: 50px;
  • background: red;
  • position: relative;
  • /* Chrome, Safari, Opera */
  • -webkit-animation-name: webref;
  • -webkit-animation-duration: 4s;
  • -webkit-animation-iteration-count: 2;
  • -webkit-animation-direction: alternate;
  • /* Standard syntax */
  • animation-name: webref;
  • animation-duration: 4s;
  • animation-iteration-count: 2;
  • animation-direction: alternate;
  • }
  • /* Chrome, Safari, Opera */
  • @-webkit-keyframes webref {
  • from {left: 0;}
  • to {left: 50%;}
  • }
  • /* Standard syntax */
  • @keyframes webref {
  • from {left: 0;}
  • to {left: 50%;}
  • }
    トピック：
  • アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利 。

プロパティ 定義と使用法

デフォルト値・初期値 :normal
適用対象 :全要素、::before / ::after 疑似要素
継承 :不可
メディア :visual
計算値 :指定値
CSS Version CSS3
アニメーションの種類 :個別
JavaScript 構文 object.style.animationDirection="funWebref"
正規順序 :形式文法で定義される一意のあいまいでない順序
CSSの構文animation-direction: normal |reverse |alternate |alternate-reverse |initial |inherit;

プロパティ値

値説明
normalアニメーションは各サイクルで順方向に再生する必要があります。これはデフォルトです。
reverseアニメーションは、各サイクルで逆方向に再生する必要があります。
alternateアニメーションは最初のサイクルで前方に再生され、次に再生され、次に交互に再生される
alternate-reverseアニメーションは最初のサイクルで後方に再生され、次に再生され、次に交互に再生される
initialこのプロパティをデフォルト値に設定する
inherit親要素からこのプロパティを継承する

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
animation-directionChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯43フルサポート◯12フルサポート◯16フルサポート◯10フルサポート◯30フルサポート◯あり
reverseフルサポート◯19フルサポート◯12フルサポート◯16フルサポート◯10フルサポート◯ありフルサポート◯あり
alternate-reverseフルサポート◯19フルサポート◯12フルサポート◯16フルサポート◯10フルサポート◯ありフルサポート◯あり

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
animation-directionAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯43フルサポート◯43フルサポート◯ありフルサポート◯16フルサポート◯30フルサポート◯ありフルサポート◯4.0
reverseサポートなし✖フルサポート◯ありフルサポート◯ありフルサポート◯16 不明サポートなし✖フルサポート◯あり
alternate-reverse 不明フルサポート◯ありフルサポート◯ありフルサポート◯16 不明 不明フルサポート◯あり
：animation-direction 関連記事
CSS animation-direction| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS animation-direction | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS