CSS Animation
앞에서 transition을 사용해서 CSS로 애니메이션 효과를 살펴보았습니다. 하지만 이는 state값이 바뀔때나 사용할 수 있기 때문에 가령 마우스커서를 이미지 위에 올리지 않고도 애니메이션 효과를 보고싶을 겁니다. 이를 위해서는 @keyframes를 사용할 필요가 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>seongmin times</title>
<style>
@keyframes 사용자가지어낸이름 {
from {
transform: rotateX(0);
}
to {
transform: rotateX(360deg);
}
}
img {
border: 5px solid black;
border-radius: 50%;
animation: 사용자가지어낸이름 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/fa-50.jpg" />
</body>
</html>
원하는 애니메이션의 이름을 @keyframes 옆에 선언해주고 from to구문을 사용해주어야 합니다. 그리고 img에 animation: 사용자가지어낸이름 5s ease-in-out infinite;를 써주면 페이지가 로드되는 즉시 에니메이션이 실행 됩니다. infinite는 계속 무한이 애니메이션을 실행 시킵니다.
그런데 문제가 있습니다. 가령 아래 코드를 실행해보면
<style>
@keyframes 사용자가지어낸이름 {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg) translateX(100px);
}
}
img {
border: 5px solid black;
border-radius: 50%;
animation: 사용자가지어낸이름 5s ease-in-out infinite;
}
</style>
이미지가 뱅글뱅글 돌다가 마지막에 100px옆으로 움직인 위치에 멈춥니다. 그리고 나서 다시 from부터 시작하겠죠? 그럼 원래 이미지가 위치한곳에서 다시 애니메이션이 시작합니다. 그럼 이상하게 보이고 하나도 자연스럽지 않습니다. 그래서 from to 구문을 다르게 써줘봅니다.
<style>
@keyframes 사용자가지어낸이름 {
0% {
transfrom: rotateY(0);
}
50% {
transform: rotateY(180deg) translateY(-100px);
}
100% {
transform: rotateY(0);
}
}
img {
border: 5px solid black;
border-radius: 50%;
animation: 사용자가지어낸이름 5s ease-in-out infinite;
}
</style>
이렇게 바꿔줍니다. 그러면 아주 자연스럽죠? 마치 슈퍼마리오 동전이 뱅글뱅글돌면서 위아래로 흔들리는 모습입니다. 여기서 사용한 0%, 50%, 100% 말고도 다양하게 사용자가 만들어서 사용할 수 있습니다. 갸령 66%도 가능합니다. 사용가능한 attribute로는 border-radius, border-color 등 거의 모든걸 쓸수 있는데 font-size는 못쓰는거같습니다.
'HTML-CSS > CSS' 카테고리의 다른 글
| CSS Border Box (0) | 2021.03.21 |
|---|---|
| CSS Media Queries (0) | 2021.03.21 |
| CSS transform (0) | 2021.03.21 |
| CSS transition (0) | 2021.03.21 |
