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

animation CSS プロパティとは

トピック:形状の変更や要素によるモーションの作成。アニメーション名、アニメーション期間、タイミング機能、遅延、反復回数、方向、塗りつぶしモード、アニメーションの様々なアニメーションの省略形プロパティ、アニメーションを作成する事ができる 少なくとも2つのプロパティanimation-nameanimation-duration(0より大きい)プロパティを指定することが必要

アニメーション

実例 コード 1

サンプル コードを試す
  • .webref {
  • width: 50px;
  • height: 50px;
  • background: red;
  • position: relative;
  • /* Chrome, Safari, Opera */
  • -webkit-animation: webref 2s linear 0s infinite alternate;
  • /* Standard syntax */
  • animation: webref 2s linear 0s infinite alternate;
  • }
  • /* Chrome, Safari, Opera */
  • @-webkit-keyframes webref {
  • from {left: 0;}
  • to {left: 50%;}
  • }
  • /* Standard syntax */
  • @keyframes webref {
  • from {left: 0;}
  • to {left: 50%;}
  • }

プロパティ 定義と使用法

デフォルト値・初期値 :
適用対象 :全要素、::before / ::after 疑似要素
継承 :不可
メディア :visual
計算値 :
CSS Version CSS3
アニメーションの種類 :個別
JavaScript 構文 object.style.animation="funWebref"
正規順序 :形式文法における値の出現順
CSSの構文animation: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state;

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

PropertyDesktop 互換性
animationChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯ 43フルサポート◯ 12フルサポート◯ 16フルサポート◯ 10フルサポート◯ 30フルサポート◯ Yes

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

PropertyMobile 互換性
animationAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯ Yesフルサポート◯ 43フルサポート◯ Yesフルサポート◯ 16フルサポート◯ 30フルサポート◯ Yesフルサポート◯ 4.0
animation・ animation, コード 関連記事
CSS animation| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS animation | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS