CSS animated properties

by 2 contributors:

このページは、すべての CSS プロパティの一覧と、各プロパティがアニメーション可能かどうかを示します。

アニメーション
プロパティ アニメーションの可否
animation 不可
animation-delay 不可
animation-direction 不可
animation-duration 不可
animation-fill-mode 不可
animation-iteration-count 不可
animation-name 不可
animation-play-state 不可
animation-timing-function 不可
遷移
プロパティ アニメーションの可否
transition 不可
transition-delay 不可
transition-duration 不可
transition-property 不可
transition-timing-function 不可
変形
プロパティ アニメーションの可否
transform 可。transform の値として補完します。
transform-origin 可。length または percentage, calc();の単純なリスト形式 の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
transform-style 不可
transform-box 不可
perspective 可。length の値として補完します。
perspective-origin 可。length または percentage, calc();の単純なリスト形式 の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
backface-visibility 不可
プロパティ アニメーションの可否
color 可。color の値として補完します。
opacity 可。number の値として補完します。
段組み
プロパティ アニメーションの可否
columns 以下の各プロパティのショートハンドとして補完します:
  • column-width: 可。length の値として補完します。
  • column-count: 可。integer の値として補完します。
column-width 可。length の値として補完します。
column-count 可。integer の値として補完します。
column-gap 可。length の値として補完します。
column-rule 以下の各プロパティのショートハンドとして補完します:
  • column-rule-color: 可。color の値として補完します。
  • column-rule-style: 不可
  • column-rule-width: 可。length の値として補完します。
column-rule-color 可。color の値として補完します。
column-rule-style 不可
column-rule-width 可。length の値として補完します。
break-before 不可
break-after 不可
break-inside 不可
column-span 不可
column-fill 不可
テキスト
プロパティ アニメーションの可否
hyphens 不可
letter-spacing 可。length の値として補完します。
word-wrap 不可
overflow-wrap 不可
text-transform 不可
tab-size 不可 (このプロパティは、仕様が勧告候補に到達する前に変更される可能性があります)
text-align 不可
text-align-last 不可
text-indent 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
white-space 不可
word-break 不可
word-spacing 可。length の値として補完します。
line-break 不可
text-size-adjust 不可
テキスト装飾
プロパティ アニメーションの可否
text-decoration 以下の各プロパティのショートハンドとして補完します:
  • text-decoration-color: 可。color の値として補完します。
  • text-decoration-style: 不可
  • text-decoration-line: 不可
text-decoration-color 可。color の値として補完します。
text-decoration-style 不可
text-decoration-line 不可
text-decoration-skip 不可
text-shadow 可。shadow リスト の値として補完します。
text-underline-position 不可
記述モード
プロパティ アニメーションの可否
direction 不可
unicode-bidi 不可
writing-mode 不可
text-orientation 不可
伸縮自在ボックス
プロパティ アニメーションの可否
align-content 不可
align-items 不可
align-self 不可
flex-basis 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
flex-direction 不可
flex-flow 不可
flex-grow 可。number の値として補完します。
flex-shrink 可。number の値として補完します。
flex 以下の各プロパティのショートハンドとして補完します:
  • flex-grow: 可。number の値として補完します。0 と他の値までの間を除く。
  • flex-shrink: 可。number の値として補完します。0 と他の値までの間を除く。
  • flex-basis: 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
flex-wrap 不可
justify-content 不可
order 可。integer の値として補完します。
背景と境界線
プロパティ アニメーションの可否
background 以下の各プロパティのショートハンドとして補完します:
  • background-color: 可。color の値として補完します。
  • background-image: 不可
  • background-clip: 不可
  • background-position: 可。length または percentage, calc();の反復可能リストの単純なリスト形式 の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
  • background-size: 可。length または percentage, calc();の反復可能リストの単純なリスト形式 の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。これは、keyword 値がアニメーション不可であることを意味します。
  • background-repeat: 不可
  • background-attachment: 不可
background-attachment 不可
background-clip 不可
background-color 可。color の値として補完します。
background-image 不可
background-origin 不可
background-position 可。length または percentage, calc();の反復可能リストの単純なリスト形式 の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
background-repeat 不可
background-size 可。length または percentage, calc();の反復可能リストの単純なリスト形式 の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。これは、keyword 値がアニメーション不可であることを意味します。
border 以下の各プロパティのショートハンドとして補完します:
  • border-color: 以下の各プロパティのショートハンドとして補完します:
    • border-bottom-color: 可。color の値として補完します。
    • border-left-color: 可。color の値として補完します。
    • border-right-color: 可。color の値として補完します。
    • border-top-color: 可。color の値として補完します。
  • border-style: 不可
  • border-width: 以下の各プロパティのショートハンドとして補完します:
    • border-bottom-width: 可。length の値として補完します。
    • border-left-width: 可。length の値として補完します。
    • border-right-width: 可。length の値として補完します。
    • border-top-width: 可。length の値として補完します。
border-bottom 以下の各プロパティのショートハンドとして補完します:
  • border-bottom-color: 可。color の値として補完します。
  • border-bottom-style: 不可
  • border-bottom-width: 可。length の値として補完します。
border-bottom-color 可。color の値として補完します。
border-bottom-left-radius 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
border-bottom-right-radius 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
border-bottom-style 不可
border-bottom-width 可。length の値として補完します。
border-color 以下の各プロパティのショートハンドとして補完します:
  • border-bottom-color: 可。color の値として補完します。
  • border-left-color: 可。color の値として補完します。
  • border-right-color: 可。color の値として補完します。
  • border-top-color: 可。color の値として補完します。
border-image 不可
border-image-outset 不可
border-image-repeat 不可
border-image-slice 不可
border-image-source 不可
border-image-width 不可
border-left 以下の各プロパティのショートハンドとして補完します:
  • border-left-color: 可。color の値として補完します。
  • border-left-style: 不可
  • border-left-width: 可。length の値として補完します。
border-left-color 可。color の値として補完します。
border-left-style 不可
border-left-width 可。length の値として補完します。
border-radius 以下の各プロパティのショートハンドとして補完します:
  • border-top-left-radius: 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
  • border-top-right-radius: 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
  • border-bottom-right-radius: 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
  • border-bottom-left-radius: 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
border-right 以下の各プロパティのショートハンドとして補完します:
  • border-right-color: 可。color の値として補完します。
  • border-right-style: 不可
  • border-right-width: 可。length の値として補完します。
border-right-color 可。color の値として補完します。
border-right-style 不可
border-right-width 可。length の値として補完します。
border-style 不可
border-top 以下の各プロパティのショートハンドとして補完します:
  • border-top-color: 可。color の値として補完します。
  • border-top-style: 不可
  • border-top-width: 可。length の値として補完します。
border-top-color 可。color の値として補完します。
border-top-left-radius 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
border-top-right-radius 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
border-top-style 不可
border-top-width 可。length の値として補完します。
border-width 以下の各プロパティのショートハンドとして補完します:
  • border-bottom-width: 可。length の値として補完します。
  • border-left-width: 可。length の値として補完します。
  • border-right-width: 可。length の値として補完します。
  • border-top-width: 可。length の値として補完します。
ボックスモデル
プロパティ アニメーションの可否
box-decoration-break 不可
box-shadow 可。shadow リスト の値として補完します。
margin 可。length の値として補完します。
margin-bottom 可。length の値として補完します。
margin-left 可。length の値として補完します。
margin-right 可。length の値として補完します。
margin-top 可。length の値として補完します。
padding 可。length の値として補完します。
padding-bottom 可。length の値として補完します。
padding-left 可。length の値として補完します。
padding-right 可。length の値として補完します。
padding-top 可。length の値として補完します。
box-sizing 不可
max-height 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
min-height 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
height 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
max-width 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
min-width 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
width 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
overflow 不可
overflow-x 不可
overflow-y 不可
visibility 可。visibility の値として補完します。
表組み
プロパティ アニメーションの可否
border-collapse 不可
border-spacing 不可
caption-side 不可
empty-cells 不可
table-layout 不可
vertical-align 可。length の値として補完します。
配置
プロパティ アニメーションの可否
bottom 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
left 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
right 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
top 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
float 不可
clear 不可
position 不可
z-index 可。integer の値として補完します。
フォント
プロパティ アニメーションの可否
font 以下の各プロパティのショートハンドとして補完します:
  • font-style: 不可
  • font-variant: 不可
  • font-weight: 可。font weight の値として補完します。
  • font-stretch: 可。font stretch の値として補完します。
  • font-size: 可。length の値として補完します。
  • line-height: 可。number, length の値として補完します。
  • font-family: 不可
font-family 不可
font-variant 不可
font-variant-ligatures 不可
font-weight 可。font weight の値として補完します。
font-stretch 可。font stretch の値として補完します。
font-size 可。length の値として補完します。
line-height 可。number, length の値として補完します。
font-feature-settings 不可
font-language-override 不可
font-size-adjust 可。number の値として補完します。
font-style 不可
font-synthesis 不可
font-kerning 不可
font-variant-ligatures 不可
font-variant-position 不可
font-variant-caps 不可
font-variant-numeric 不可
font-variant-east-asian 不可
font-variant-alternates 不可
画像
プロパティ アニメーションの可否
object-fit 不可
object-position 可。length または percentage, calc();の反復可能リストの単純なリスト形式 の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
image-rendering 不可
image-orientation 不可
カウンタとリスト
プロパティ アニメーションの可否
counter-increment 不可
counter-reset 不可
list-style 不可
list-style-image 不可
list-style-position 不可
list-style-type 不可
ページ
プロパティ アニメーションの可否
orphans 不可
page-break-after 不可
page-break-before 不可
page-break-inside 不可
widows 不可
ユーザインターフェース
プロパティ アニメーションの可否
outline 以下の各プロパティのショートハンドとして補完します:
  • outline-color: 可。color の値として補完します。
  • outline-width: 可。length の値として補完します。
  • outline-style: 不可
outline-color 可。color の値として補完します。
outline-width 可。length の値として補完します。
outline-style 不可
outline-offset 可。length の値として補完します。
cursor 不可
resize 不可
text-overflow 不可
生成コンテンツ
プロパティ アニメーションの可否
content 不可
quotes 不可
フラグメンテーション
プロパティ アニメーションの可否
box-decoration-break 不可
その他
プロパティ アニメーションの可否
clip 可。rectangle の値として補完します。
display 不可
ime-mode 不可
all as each of the properties of the shorthand (all properties but unicode-bidi and direction)
will-change 不可
text-rendering 不可
コンポジットとブレンド
プロパティ アニメーションの可否
background-blend-mode 不可
mix-blend-mode 不可
isolation 不可
形状
プロパティ アニメーションの可否
shape-outside 可。*Unknown value in DB (basic-shape)* の値として補完します。
shape-margin 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
shape-image-threshold 可。number の値として補完します。
ポインタイベント
プロパティ アニメーションの可否
touch-action 不可
インライン
プロパティ アニメーションの可否
initial-letter 不可
initial-letter-align 不可
表示
プロパティ アニメーションの可否
display-inside 不可
display-outside 不可
display-list 不可
box-suppress 不可
CSSOM ビュー
プロパティ アニメーションの可否
scroll-behavior 不可
論理プロパティ
プロパティ アニメーションの可否
block-size 不可
inline-size 不可
min-block-size 不可
min-inline-size 不可
max-block-size 不可
max-inline-size 不可
margin-block-start 不可
margin-block-end 不可
margin-inline-start 不可
margin-inline-end 不可
offset-block-start 不可
offset-block-end 不可
offset-inline-start 不可
offset-inline-end 不可
padding-block-start 不可
padding-block-end 不可
padding-inline-start 不可
padding-inline-end 不可
border-block-start-width 不可
border-block-end-width 不可
border-inline-start-width 不可
border-inline-end-width 不可
border-block-start-style 不可
border-block-end-style 不可
border-inline-start-style 不可
border-inline-end-style 不可
border-block-start-color 不可
border-block-end-color 不可
border-inline-start-color 不可
border-inline-end-color 不可
border-block-start 不可
border-block-end 不可
border-inline-start 不可
border-inline-end 不可
ルビ
プロパティ アニメーションの可否
ruby-position 不可
ruby-merge 不可
ruby-align 不可
スクロールスナップ点
プロパティ アニメーションの可否
scroll-snap-type 不可
scroll-snap-points-x 不可
scroll-snap-points-y 不可
scroll-snap-destination 可。*Unknown value in DB (position)* の値として補完します。
scroll-snap-coordinate 可。*Unknown value in DB (position)* の値として補完します。

ドキュメントのタグと貢献者

タグ: 
Contributors to this page: Marsf, ethertank
最終更新者: Marsf,