CSS アニメーション関連属性

定義と使用方法

いくつかのCSS属性はアニメーション制作に使用できるため、これらはトランジションなどの効果に使用できます。

アニメーションに設定できる属性は、サイズ、数字、パーセンテージ、色など、ある値から別の値まで徐々に変更できるものです。

ブラウザのサポート

テーブルの数字は、CSSアニメーションを完全にサポートする最初のブラウザバージョンを示しています。

-webkit-、-moz- または -o- の後の数字は、プレフィックスを使用する最初のバージョンを示しています。

43.0
4.0 -webkit- 		10.0 16.0
5.0 -moz- 		9.0
4.0 -webkit- 		30.0
15.0 -webkit-
12.0 -o-

例

背景色を赤から青へのアニメーションを設定します：

@keyframes mymove {
  from {background-color: red;}
  to {background-color: blue;}
}

実際に試してみる

アニメーション関連属性

以下のテーブルには、CSSのアニメーション関連の属性が示されています：

属性 TIY
background 试一试
background-color 试一试
background-position 试一试
background-size 试一试
border 试一试
border-bottom 试一试
border-bottom-color 试一试
border-bottom-left-radius 试一试
border-bottom-right-radius 试一试
border-bottom-width 试一试
border-color 试一试
border-left 试一试
border-left-color 试一试
border-left-width 试一试
border-right 试一试
border-right-color 试一试
border-right-width 试一试
border-spacing 试一试
border-top 试一试
border-top-color 试一试
border-top-left-radius 试一试
border-top-right-radius 试一试
border-top-width 试一试
bottom 试一试
box-shadow 试一试
clip 试一试
color 试一试
column-count 试一试
column-gap 试一试
column-rule 试一试
column-rule-color 试一试
column-rule-width 试一试
column-width 试一试
columns 试一试
filter 试一试
flex 试一试
flex-basis 试一试
flex-grow 试一试
flex-shrink 试一试
font 试一试
font-size 试一试
font-size-adjust
font-stretch
font-weight 试一试
grid 试一试
grid-area 试一试
grid-auto-columns 试一试
grid-auto-flow 试一试
grid-auto-rows 试一试
grid-column 试一试
grid-column-end 试一试
grid-column-gap 试一试
grid-column-start 试一试
grid-gap 试一试
grid-row 试一试
grid-row-end 试一试
grid-row-gap 试一试
grid-row-start 试一试
grid-template 试一试
grid-template-areas 试一试
grid-template-columns 试一试
grid-template-rows 试一试
height 试一试
left 试一试
letter-spacing 试一试
line-height 试一试
margin 试一试
margin-bottom 试一试
margin-left 试一试
margin-right 试一试
margin-top 试一试
max-height 试一试
max-width 试一试
min-height 试一试
min-width 试一试
object-position 试一试
opacity 试一试
order 试一试
outline 试一试
outline-color 试一试
outline-offset 试一试
outline-width 试一试
padding 试一试
padding-bottom 试一试
padding-left 试一试
padding-right 试一试
padding-top 试一试
perspective 试一试
perspective-origin 试一试
right 试一试
text-decoration-color 试一试
text-indent 试一试
text-shadow 试一试
top 试一试
transform 试一试
transform-origin 试一试
vertical-align 试一试
visibility
width 试一试
word-spacing 试一试
z-index 试一试