CSS animation | CSS プロパティ値| 意味使い方実例

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

2018-06-18 css-reference

ページコンテンツ

▼animation CSS プロパティとは
▼アニメーション
▼実例コード 1
▼プロパティ定義と使用法
▼サポートするデスクトップブラウザ対応・互換性
▼サポートするモバイルブラウザ対応・互換性

`animation` CSS プロパティとは

トピック：形状の変更や要素によるモーションの作成。アニメーション名、アニメーション期間、タイミング機能、遅延、反復回数、方向、塗りつぶしモード、アニメーションの様々なアニメーションの省略形プロパティ、アニメーションを作成する事ができる少なくとも2つのプロパティanimation-nameとanimation-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%;}
}

プロパティ定義と使用法

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

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

Property	Desktop 互換性
animation	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本サポート	フルサポート◯ 43	フルサポート◯ 12	フルサポート◯ 16	フルサポート◯ 10	フルサポート◯ 30	フルサポート◯ Yes

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

Property	Mobile 互換性
animation	Android	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
基本サポート	フルサポート◯ Yes	フルサポート◯ 43	フルサポート◯ Yes	フルサポート◯ 16	フルサポート◯ 30	フルサポート◯ Yes	フルサポート◯ 4.0

：animation・ animation, コード関連記事

CSS animation プロパティ一覧

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

animation CSS プロパティとは

アニメーション

実例 コード 1

プロパティ 定義と使用法

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

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

CSS 入門 Tutorials

Html

Glossary

PHP

JavaScript

JQuery

CSS