트랜지션과 애니메이션 사용법

트랜지션

개요

이벤트 발생시 변화를 주기 위한 용도로 사용

움직일 대상 요소에 트랜지션 속성을 적용하고 이벤트 요소에 변화 값 속성 적용

사용법

<div class="sqare"></div>
1. 효과 대상에 transition 속성 및 기본값 적용
.sqare {width : 100px; transition: all ease 2s 0s;}
2. hover (이벤트) 에 변화 값 적용
.sqare:hover {width : 200px;}

애니메이션

개요

@keyframes를 등록하여 시간의 흐름에 따라 변화를 주기 위한 용도로 사용

움직일 대상 요소에 애니메이션 속성을 적용하고 시간 요소에 변화 값 속성 적용

사용법

1. 효과 대상에 애니메이션 속성 적용
.sqare {animation: 3s linear 1s infinite running slidein;}
2. @keyframes 정의, from to 혹은 % 으로 변화값 적용
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}

트렌스폼

모양변경, 기존 css 할수 없었던 회전, 뒤틀기 가능