[CSS] transition, transformation, animation

 

 

Transition

: 전환, 다른 상태로의 이행

- state가 아닌 root에 사용(hover을 예로 들자면, hover가 정의되지 않은 곳에 써야 함)

- 변화된 모든 값을 선택할 때는 'all' 을 사용

img{
background-color: black;
color: blue;
transition: background-color 10s ease-in-out, color 4s ease-in-out;
}

img:hover {
background-color: white;
color: white;
}

 

 

Tranformation

: 변형

- 변형하고 싶은 선택자의 css안에 작성

- transition 과 함께 사용 가능

img {
transition: transform 5s ease-in-out;
}

img: hover{
transform: rotateZ(90deg
}

 

 

Animation

- 특정한 조건 없이 재생

- 연속으로 재생하고자 할 때 'infinite' 써줌

- 선택자 안에 쓰는 것이 아니라 css 파일 안에 바로 작성

- 원하는 만큼 구간을 나누고 퍼센트 값을 이용해서 설정 가능

@keyframes animationName {
from{
	transform: rotateX(0)
}
to{
	transform:rotateX(360deg) translate(100px)
}
}

img {
animation: animatioName 5s ease-in-out infinte;
}

@keyframes animationName {
0%{
	transform: rotateX(0)
}
50%{
	transform:rotateX(360deg) translate(100px);
	border-radius: 0px;
	border-color: tomato;
}
100%{
	transform: rotateX(0)
}
}
img {
animation: animatioName 5s ease-in-out infinte;
}