728x90
애니메이션03
오늘은 아래와 같이 공이 튀는 애니메이션을 만들어 보았습니다.
HTML
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
CSS
* {
box-sizing: border-box
}
body {
background: linear-gradient(to left, #4568DC 0%, #B06AB3 100%);
width: 100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
animation: x 1s ease-in-out alternate infinite 0s both;
}
.wrapper:nth-of-type(2) {
animation-delay: 0.1s;
}
.wrapper:nth-of-type(3) {
animation-delay: 0.2s;
}
.wrapper:nth-of-type(4) {
animation-delay: 0.3s;
}
.wrapper:nth-of-type(5) {
animation-delay: 0.4s;
}
.wrapper>div {
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 100%;
margin: 40px;
animation: y 1s linear infinite 0s both;
}
.wrapper:nth-of-type(2)>div {
animation-delay: 0.1s;
height: 40px;
width: 40px;
opacity: 0.8;
}
.wrapper:nth-of-type(3)>div {
animation-delay: 0.2s;
height: 30px;
width: 30px;
opacity: 0.6;
}
.wrapper:nth-of-type(4)>div {
animation-delay: 0.3s;
height: 20px;
width: 20px;
opacity: 0.4;
}
.wrapper:nth-of-type(5)>div {
animation-delay: 0.4s;
height: 10px;
width: 10px;
opacity:0.2;
}
@keyframes x {
0% {
transform: translatex(-100px);
}
100% {
transform: translatex(100px);
}
}
@keyframes y {
25% {
transform: translatey(-50px);
}
0%, 50%, 100% {
transform: translatey(0);
}
75% {
transform: translatey(50px);
}
}
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS]CSS animation (4) | 2022.09.07 |
|---|---|
| [CSS]SVG animation (4) | 2022.09.07 |
| [CSS]애니메이션02 (5) | 2022.08.29 |
| [CSS]애니메이션01 (4) | 2022.08.29 |
| [CSS]요소 숨기기 (8) | 2022.08.25 |
댓글