Animation(애니메이션)
이전 글에서는 img 위에 마우스를 올려 놓는 조건 하에 Transition이 실행됐다. 만약 계속 재생되는 애니메이션을 만들고 싶으면 어떻게 해야할까? 이번 글에서는 마우스의 움직임 없이 페이지가 새로고침 되면 Transition이 계속 실행되는 애니메이션에 대해 배워본다.
Coin flip
Coin flip이라 불리는 Animation을 만들어보자.
@keyframes를 먼저 써준 후에 만들고 싶은 애니메이션 이름을 써준다. 나는 superSexyCoinFlip이라고 지어줬다.
어디서 부터(form) 어디까지(to) 애니메이션을 줄 것인지 설정한다.
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Gata Times</title>
<style>
@keyframes superSexyCoinFlip {/*@keyframes을 써준 후 애니메이션 이름을 써준다.*/
from{ /*어디서 부터*/
transform: rotateY(0);
}
to{ /*어디까지*/
transform: rotateY(180deg) translateX(100px);
}
}
img{
border: 10px solid rgb(225, 148, 148); /*이미지에 테두리를 만듦*/
border-radius: 50%; /*이미지를 원으로 만듦*/
animation: superSexyCoinFlip 3s ease-in-out infinite; /*superSexyCoinFlip라는 이름의 애니메이션이 3초동안 실행되는데 ease-in-out 방식으로 무한대로 재생된다.*/
}
</style>
</head>
<body>
<img src="img/logo.png" />
</body>
</html>
개발은 즐거워🪇