티스토리 뷰

CSS

CSS - animation

seop8044 2022. 4. 15. 15:30

animation 속성에 대한 설명

transform transform 속성은 요소의 움직임을 일괄적으로 설정합니다.
transform-orgin transform-origin 속성은 요소의 움직임 방향을 설정합니다.
transform-style transform-style 속성은 요소의 움직임 스타일을 설정합니다.
perspective perspective 속성은 3D 위치 요소에 약간의 원근감을 주기 위해 z=0 평면과 사용자 사이의 거리를 결정합니다.
perspective-orgin perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다.
backface-visibility backface-visibility 속성은 요소의 뒷면을 정의합니다.
animation animation 속성은 애니메이션을 정의합니다.
animation-delay animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.
animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
animation-play-state animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
animation-timimg-fuction animation-timing-function 속성은 움직임의 속도를 정의합니다.
@keyframes @keyframes 속성은 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다.
transition transition 속성은 요소의 움직임 시간을 일괄적으로 설정합니다.
transition-delay transition-delay 속성은 요소의 움직임 지연 시간을 설정합니다.
transition-duration transition-duration 속성은 요소의 움직임 지속 시간을 설정합니다.
transition-property transition-property 속성은 요소의 움직임 속성을 설정합니다.
transition-timing-function transition-timing-function 속성은 요소의 움직임 기능을 설정합니다.

'CSS' 카테고리의 다른 글

CSS - transform  (0) 2022.04.18
CSS grid  (2) 2022.02.05
CSS flex  (1) 2022.02.05
CSS IR 기법  (1) 2022.02.05
CSS 선택자  (0) 2022.02.04
댓글
© 2018 webstoryboy