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

2018-06-15 css-reference

ページコンテンツ

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

`animation-name` CSS プロパティとは

トピック：選択された要素に適用されるべき@keyframes定義されたアニメーションの名前を指定することができる

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

実例コード 1

サンプルコードを試す

.webref {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: webref;
-webkit-animation-duration: 2s;
/* Standard syntax */
animation-name: webref;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes webref {
from {left: 0;}
to {left: 50%;}
}
/* Standard syntax */
@keyframes webref {
from {left: 0;}
to {left: 50%;}
}

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利。

プロパティ定義と使用法

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

プロパティ値

値	説明
`keyframename`	セレクタにバインドするキーフレームの名前を指定する
`none`	デフォルト値。アニメーションが存在しないことを指定します（カスケードからのアニメーションを上書きするために使用できます）
`initial`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

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

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

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

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

：animation-name 関連記事

CSS animation-name| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル — CSS animation-name | CSS プロパティ値| 意味使い方実例 – WebRef

タグ:

#CSS アニメーション
#CSS プロパティ