앞서 배운 transformation에서는 마우스를 갖다 대야만 효과를 확인해볼 수 있었다. 마우스를 대지 않고도 애니메이션 효과를 줄 수 있는 방법은 없을까? 물론 있다. 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@keyframes CuteSugar {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
img {
border: 5px solid black;
border-radius: 10%;
animation: CuteSugar 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="Konkuk.jpg" />
</body>
</html>코드를 보면 @keyframes라는 부분이 보인다. 이 부분이 바로 애니메이션효과를 정의하는 부분이다. 자세히 살펴보자.
@keyframes CuteSugar {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}구조가 보이는가? @keyframes 뒤에 애니메이션 이름을 정의하고 밑에 원하는 효과를 적으면 된다.
사용은 다음과 같이 쓰면 된다.
img {
border: 5px solid black;
border-radius: 10%;
animation: CuteSugar 5s ease-in-out infinite;
}animation : 애니메이션 이름 재생시간 옵션
순서로 사용했음을 알 수 있다 . 참고로 옵션에는 infinite옵션을 넣어주었다. (무한 반복)
사용방법은 이정도로 보도록 하고, 이제 결과를 확인해보자!
마우스를 갖다대지 않아도 페이지를 로드하는 순간 애니메이션 효과가 발생함을 확인할 수 있다!
animation을 정의내릴때 from과 to를 사용하면 2단계에 걸친 효과를 만들 수 있다.
하지만 이런식으로 여러 단계로 나누어 효과를 내는 방법도 있다. 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@keyframes CuteSugar {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(360deg) translateY(100px);
}
100% {
transform: rotateY(0);
}
}
img {
border: 10px solid black;
border-radius: 10%;
width: 300px;
animation: CuteSugar 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="Konkuk.jpg" />
</body>
</html>0% 50% 100%라고 씀으로써 3단계로 걸쳐 효과를 나타낼 수 있게 되었다. 결과를 확인해보자!
1단계 0에서 시작해 2단계 y축방향으로 360도 회전하며 100px만큼 밑으로 내려오고 3단계 다시 0의 상태로 돌아가는 모습을 관찰해볼 수 있다!
아래와 같은 느낌으로 5단계로 나누어 효과를 줄 수도 있으니 다음의 코드를 참고해두자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
@keyframes CuteSugar {
0% {
transform: rotateY(0);
}
25% {
transform: scale(2);
}
50% {
transform: rotateY(180deg) translateY(100px);
}
75% {
transform: scale(5);
}
100% {
transform: rotateY(0);
}
}
img {
border: 10px solid black;
border-radius: 10%;
width: 200px;
animation: CuteSugar 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="Konkuk.jpg" />
</body>
</html>참고로 transform 뿐만 아니라 다른 속성들도 애니메이션으로 만들 수 있다. 꼭 transform만 써야하는 건 아니지만 transform을 쓰는 것을 권한다. 왜냐하면 다른 일부 속성은 animation이 잘 안먹힐 수 있기 때문이다.
마지막으로 사이트를 하나 소개하고 끝내도록 하겠다.
Animista - CSS Animations on Demand
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
animista.net
CSS에서 사용하는 애니메이션 효과를 간편하게 확인해볼 수 있는 사이트다. 유용하게 사용하도록 하자!
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #22.Semantic tag (0) | 2022.03.15 |
|---|---|
| [HTML/CSS] #20.Tranformations (0) | 2022.01.15 |
| [HTML/CSS] #19.Transitions (0) | 2022.01.14 |
| [HTML/CSS] #18.Variable (Custom property) (0) | 2022.01.14 |
| [HTML/CSS] #17.Pseudo Selector2 (0) | 2022.01.14 |
