【CSS】 애니메이션이 가능한 CSS 속성 목록

【CSS】 애니메이션 가능의 의미

[CSS 목차]

CSS의 프로퍼티 중에는 애니메이션이 가능한 것들도 있고, 애니메이션이 불가능한 것들도 있습니다. CSS로 애니메이션 효과를 줄 수 있는 방법으로는 animation과 transition 2가지 방법이 있습니다. 즉, 애니메이션이 가능한 요소들은 이러한 효과를 적용할 수 있는 반면, 애니메이션이 불가능한 요소들은 이런 효과를 적용할 수 없습니다. 이번 포스트에서는 이것이 무슨 뜻인지에 대해서 알아보겠습니다.

[1] 애니메이션 효과를 줄 수 있는 프로퍼티들

• background
  • background
  • backgroiund-color
  • background-position
  • background-position-x
  • background-position-y
  • background-size
  • backgroiund-color
  • background-position
  • background-position-x
  • background-position-y
  • background-size
  • backgroiund-color
  • background-position
  • background-position-x
  • background-position-y
  • background-size
  • backgroiund-color
  • background-position
  • background-position-x
  • background-position-y
  • background-size
  • backgroiund-color
  • background-position
  • background-position-x
  • background-position-y
  • background-size
• border
  • border
  • border-color
  • border-spacing
  • border-left
    • border-left-color
    • border-left-width
  • border-right
    • border-right-color
    • border-right-width
  • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-width
  • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-width
• aspect-ratio
• box-shadow
• clip
• columns
  • column-count
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-width
  • column-width
• filter
• flex
  • flex-basis
  • flex-grow
  • flex-shrink
• 텍스트 관련 속성들
  • text-decoration-color
  • text-indent
  • text-shadow
  • word-spacing
  • color
• font
  • 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
• letter-spacing
• line-height
• margin
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
• object-position
• opacity
• order
• outline
  • outline-color
  • outline-offset
  • outline-width
• padding
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
• perspective
  • perspective-origin
• 위치 관련 속성들
  • right
  • left
  • bottom
  • top
• 크기 관련 속성들
  • width
  • height
  • max-height
  • max-width
  • min-height
  • min-width
• 변형 관련 속성들
  • rotate
  • scale
  • transform
    • transform-origin
  • translate
• vertical-align
• visibility
• z-index