animation

Transition

state가 없는 상태에서 state가 있는 상태로 변화하는 애니메이션을 만들어준다.
state에 따라 바뀌는 property를 갖고 있으면 사용된다.

transition은 state가 없는곳에 붙여야 한다. (root에!)
transition: property duration timing-function 순서로 쓴다.

/*예시*/
a {
	color: white;
    background-color: red;
    transition: all 5s ease-in-out;
}
a:hover {
	color: red;
    background-color: white;
}

Transformation

transformation은 box와 형제, 그리고 이미지에 영향을 끼치지 않는다.
transition과 같이 쓸수도 있다.

img {
	border: 5px solid black;
    border-radius: 50%;
    transition: transform 5s ease-in-out;
}
img:hover {
	transform: rotateZ(90deg) scale(0.5);
}

https://developer.mozilla.org/ko/docs/Web/CSS/transform

Animation

@keyframes coinFlip {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}

img {
	animation: coinFlip 5s ease-in-out infinite;
}

@keyframes coinFlip {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(360deg) translateX(100px);
	}
    100% {
    	transform: rotateY(0);
    }
}

img {
	animation: coinFlip 5s ease-in-out infinite;
}