크게 2가지 애니메이션 효과로 분류 가능하다.
1. 요소들을 360도 회전시키는 애니메이션
2. 요소들을 가운데 한 점으로 모아주는 애니메이션
[가상선택자와 그림자효과]
- div class loader의 before, after 가상선택자를 활용해 애니메이션 효과를 적용할 원들을 만든다.
- 각 요소들의 그림자를 x축으로 이동시키고 배치함으로써 또 다른 요소가 활용되는것 과 같은 효과를 만들어 낸다.
.loader:before {
background-color: #cb2025;
box-shadow: 30px 0 0 #f8b334;
margin-bottom: 10px;
}
.loader:after {
background-color: #00a096;
box-shadow: 30px 0 0 #97bf0d;
}
[1. 회전 애니메이션]
- loader div 를 360도 회전시키는 애니메이션
- 총 2바퀴를 도는 애니메이션 이다.
- 시작시 loader div의 크기는 0.8 scale
- 1바퀴째는 loader div 의 크기가 1.2 scale 로 커진다. (keyframes 50%부분)
- 2바퀴째는 0.8 scale
[2. 겹치기 애니메이션]
- 요소들을 가운데 한 점으로 모아주는 애니메이션
- 1. 요소들이 정 가운데 한점으로 모인다. 2. 요소들이 다시 원래의 자리로 되돌아 간다. -> keyframes 50%부분에서 가운데로 모이면 된다.
- 우선 요소의 그림자가 원래 가상요소와 겹쳐져야 한다.
- 기존의 after, before 가상요소들도 가운데로 위치하기위해 translate 을 사용.
/* 그림자가 다시 합쳐진다.*/
box-shadow: 0 0 0 #f8b334;
margin-bottom: 0;
/* x축으로 15px, y축으로 15px 움직인다.*/
-webkit-transform: translate(15px, 15px);
-moz-transform: translate(15px, 15px);[HTML]
<!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>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="loader"></div>
</body>
</html>[css]
html,
body {
height: 100%;
}
body {
align-items: center;
background-color: #1d1f20;
display: flex;
justify-content: center;
}
/* 로딩 rotate 애니메이션 설정 */
.loader {
animation-name: rotate; /*애니메이션 이름*/
animation-duration: 10s; /*애니메이션 진행시간*/
animation-iteration-count: infinite; /*애니메이션 진행횟수*/
height: 50px;
width: 50px;
}
/* 로딩 요소 가상 선택자 */
.loader:before,
.loader:after {
content: "";
display: block;
height: 20px;
width: 20px;
border-radius: 50%;
}
/* 각 가상요소의 애니메이션 설정 */
/* 가상요소의 그림자로 또 하나의 객체로 표현 */
.loader:before {
animation-name: ball1;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: #cb2025;
box-shadow: 30px 0 0 #f8b334;
margin-bottom: 10px;
}
.loader:after {
animation-name: ball2;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: #00a096;
box-shadow: 30px 0 0 #97bf0d;
}
/* 로딩 rotate 애니메이션 : 2바퀴 도는 애니메이션*/
/* 1바퀴 -> 1.2 만큼 커졌다*/
/* 2바퀴 -> 0.8 원래 크기로 돌아갔다*/
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(0.8);
-moz-transform: rotate(0deg) scale(0.8);
}
50% {
-webkit-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
}
100% {
-webkit-transform: rotate(720deg) scale(0.8);
-moz-transform: rotate(720deg) scale(0.8);
}
}
/* ball 애니메이션*/
/* keyframes 50% 지점일때 두개의 요소가 한 지점에서 만나게 하기위한 애니메이션 */
@keyframes ball1 {
0% {
box-shadow: 30px 0 0 #f8b334;
}
50% {
/* 그림자가 다시 합쳐진다.*/
box-shadow: 0 0 0 #f8b334;
margin-bottom: 0;
/* x축으로 15px, y축으로 15px 움직인다.*/
-webkit-transform: translate(15px, 15px);
-moz-transform: translate(15px, 15px);
}
100% {
box-shadow: 30px 0 0 #f8b334;
margin-bottom: 10px;
}
}
@keyframes ball2 {
0% {
box-shadow: 30px 0 0 #97bf0d;
}
50% {
box-shadow: 0 0 0 #97bf0d;
margin-top: -20px;
-webkit-transform: translate(15px, 15px);
-moz-transform: translate(15px, 15px);
}
100% {
box-shadow: 30px 0 0 #97bf0d;
margin-top: 0;
}
}
'WEB animation & effect' 카테고리의 다른 글
| Water wave animation (0) | 2021.09.12 |
|---|---|
| glowing icon & text (0) | 2021.09.11 |
| Aurora UI (0) | 2021.09.06 |
| Bounce-ball animation (0) | 2021.09.06 |
| Loading-bar animation (0) | 2021.09.06 |