본문 바로가기

TUTORIAL


CSS Animation

CSS Animation - Tail Animation

CSS Animation 튜토리얼입니다. CSS3를 이용한 애니메이션과 사이트에 필요한 모션에 대해서 배우는 튜토리얼입니다.
오늘 배울 애니메이션 완성작입니다.
완성 샘플 : Tail Animation GO


사용프로그램
codepen GO


CSS Reference GO

CSS Animation GO

Codepen Webstoryboy GO

인스타그램 보기 GO

포폴 만들기 스터디 모임 GO

웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공

+ 웹디자인 기능사 GO
+ CSS Animation GO
+ Parallax GO
+ Image Slider GO

기본 애니메이션
Bar Animation GO
Dot Animation GO
Wave Animation GO
Cube Animation GO
Tail Animation GO

<div class="circle">
    <div></div>
</div>
<div class="circle">
    <div></div>
</div>
<div class="circle">
    <div></div>
</div>
<div class="circle">
    <div></div>
</div>
<div class="circle">
    <div></div>
</div>










 













































* {box-sizing: border-box;}
body {
    align-items:center;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    display:flex;
    justify-content:center;
    min-height:100vh;
    width: 100vw;
}
.circle {
    position:absolute;
    animation: x 1s ease-in-out alternate infinite 0s both;
}
.circle > div {
    background: #fff;
    height: 50px;
    margin: 40px;
    width: 50px;
    border-radius: 100%;
    animation: y 1s linear infinite 0s both;
}
.circle:nth-of-type(2) > div {
    height: 40px;
    width: 40px;
    opacity:0.8;
}
.circle:nth-of-type(3) > div {
    height: 30px;
    width: 30px;
    opacity:0.6;
}
.circle:nth-of-type(4) > div {
    height: 20px;
    width: 20px;
    opacity:0.4;
}
.circle:nth-of-type(5) > div {
    height: 10px;
    width: 10px;
    opacity:0.2;
}
.circle:nth-of-type(2),
.circle:nth-of-type(2) > div {
    animation-delay: 0.1s;
}
.circle:nth-of-type(3),
.circle:nth-of-type(3) > div {
    animation-delay: 0.2s;
}
.circle:nth-of-type(4),
.circle:nth-of-type(4) > div {
    animation-delay: 0.3s;
}
.circle:nth-of-type(5),
.circle:nth-of-type(5) > div {
    animation-delay: 0.4s;
}

@keyframes x{
    0% {transform:translate(-100px,0);}
    100% {transform:translate(100px,0);}
}
@keyframes y{
    25% {transform: translate(0, -100px);}
    0%, 50%, 100% {transform:translate(0,0)}
    75% {transform:translate(0,100px)}
}