본문 바로가기

TUTORIAL


CSS Animation

CSS Animation - Rock Animation

CSS Animation 튜토리얼입니다. CSS3를 이용한 애니메이션과 사이트에 필요한 모션에 대해서 배우는 튜토리얼입니다.


사용프로그램
codepen GO


CSS Reference GO

CSS Animation GO

JS Animation GO

Parallax 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

기본 애니메이션
Basic01 Bar Animation GO
Basic02 Dot Animation GO
Basic03 Wave Animation GO
Basic04 Cube Animation GO
Basic05 Tail Animation GO

HoverEffect01 Animation GO
HoverEffect02 Animation GO
HoverEffect03 Animation GO
HoverEffect04 Animation GO
HoverEffect05 Animation GO

Motion01 Tentacle Animation GO
Motion02 Minion Animation GO
Motion03 Rock Animation GO
Motion04 Rocket Animation GO
Motion05 Rocket(tween) Animation GO

<div class="roket-container">
<div class="wing-left"></div>
<div class="wing-right"></div>
<div class="exhaust"></div>

<div class="capsule">
    <div class="top">
    <div class="shadow"></div>
    </div>
    <div class="base"></div>
</div>

<div class="window-big"></div>
<div class="window-small"></div>

<div class="fire-1"></div>
<div class="fire-2"></div>
<div class="fire-3"></div>
<div class="fire-4"></div>

<div class="spark-2"></div>
    <div class="spark-3"></div>
    <div class="spark-4"></div>
    <div class="star star-1"></div>
    <div class="star star-2"></div>
    <div class="star star-3"></div>
    <div class="star star-4"></div>
    <div class="star star-5"></div>
    <div class="star star-6"></div>
    <div class="star star-7"></div>
    <div class="star star-8"></div>
    <div class="star star-9"></div>
    <div class="star star-10"></div>
    <div class="star star-11"></div>
    <div class="star star-12"></div>
    <div class="star star-13"></div>
    <div class="star star-14"></div>
    <div class="star star-15"></div>
    <div class="star star-16"></div>
</div>
    










    













































*, *:before, *:after {box-sizing: border-box;}
body {background: #1d1d1d; }

.roket-container {
    width: 202px; height: 380px;
    background: #1d1d1d;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;
    animation: vibration 0.2s infinite;
}
@keyframes vibration {
    0% {transform: translate(0,0) rotate(45deg);}
    50% {transform: translate(1px,-1px) rotate(45deg);}
    100% {transform: translate(0,0) rotate(45deg);}
}
.capsule { 
    position: absolute;
    left: 46px; top: 5px;
    width: 111px; height: 156px;
    overflow: hidden;
    z-index: 150;
}
.capsule .top {
    position: absolute;
    left: 0;
    width: 0; height: 0; padding: 0;
    border-bottom: 62px solid #f3f3f3;
    border-left: 56px solid transparent;
    border-right: 56px solid transparent;
}
.capsule .top:after {
    content:'';
    position: absolute;
    left: 25px; top: -14px;
    width: 0; height: 0;
    border-bottom: 84px solid #1d1d1d;
    border-left: 0px solid transparent;
    border-right: 156px solid transparent;
    transform: skew(42deg);
    z-index: 150;
}
.capsule .top .shadow { 
    position: absolute;
    width: 0; height: 0;
    top: -20px; left: -3px;
    border-bottom: 90px solid #e0e0e0;
    border-left: 20px solid transparent;
    border-right: 80px solid transparent;
    transform: skew(26deg);
    z-index: 140;
}

.capsule .base {
    position: absolute;
    top: 62px; left: 0px;
    width: 112px; height: 94px;
    background: linear-gradient(to right, #f3f3f3 0%, #f3f3f3 65%, #e0e0e0 65%, #e0e0e0 100%);
}
.wing-left { 
    position: absolute;
    height: 103px; width: 0; padding: 0;
    top: 82px; left: 16px;
    border-right: 38px solid #743388;
    border-top: 21px solid transparent;
    border-bottom: 19px solid transparent;
    transform: rotate(10deg) skew(5deg);
    z-index: 50;
}
.wing-left:after { 
    content:'';
    display: block;
    position: absolute;
    bottom: -50px;
    width: 0; height: 0;
    border-top: 20px solid transparent;
    border-right: 50px solid #1d1d1d;
    border-bottom: 50px solid transparent
}
.wing-right { 
    position: absolute;
    height: 97px; width: 0; padding: 0;
    top: 67px; right: 17px;
    border-right: 40px solid #743388;
    border-top: 0px solid transparent;
    border-bottom: 15px solid transparent;
    transform: rotate(-10deg) skew(-5deg);
    z-index: 50;
}
.wing-right:after { 
    content:'';
    display: block;
    position: absolute;
    top: -33px; left: -19px;
    width: 0; height: 0;
    border-top: 30px solid transparent;
    border-right: 68px solid #1d1d1d;
    border-bottom: 45px solid transparent
}
.exhaust {
    position: absolute;
    width: 101px; height: 0;
    top: 156px; left: 51px;
    border-top: 23px solid #743388;
    border-left: 9px solid transparent;
    border-right: 8px solid transparent;
    z-index: 100;
}
.window-big { 
    width: 70px; height: 70px;
    background-color: #743388;
    border-radius: 50%;
    position: absolute;
    top: 57px; left: 66px;
    z-index: 550;
}
.window-small { 
    width: 44px; height: 44px;
    background-color: #272425;
    border-radius: 50%;
    position: absolute;
    top: 70px; left: 79px;
    z-index: 550;
}
.fire-1 { 
    position: absolute;
    left: 64px; top: 169px;
    width: 70px; height: 70px;
    background: linear-gradient(135deg, #ef8832 0%, #ef8832 50%, #e82134 50%, #e82134 100%);
    transform: rotate(-40deg) skew(1deg, -11deg);
    z-index: 99;
    animation: main_fire 0.1s ease-in infinite;
}
@keyframes main_fire { 
    0% {transform: translate(0, 5px) scale(1.1,1) rotate(-33deg) skew(0deg, -30deg) }
    100% {transform: translate(0, 0px) scale(1,1.4) rotate(-33deg) skew(0deg, -30deg)}
}
.fire-2 {
    position: absolute;
    height: 33px;
    width: 33px;
    top: 230px;
    left: 63px;
    transform-origin: 50% 50%;
    transform: rotate(-33deg) skew(0deg, -30deg);
    z-index: 200;
    background: linear-gradient(135deg, #E82134 0%, #E82134 50%, #EF8B32 50%, #EF8B32 100%);
    animation-delay: 0.2s;
    animation: fire_propulsion 0.3s ease-in infinite;
}
.fire-3 {
    position: absolute;
    height: 22px;
    width: 22px;
    top: 196px;
    left: 58px;
    transform-origin: 50% 50%;
    transform: rotate(-33deg) skew(0deg, -30deg);
    z-index: 20;
    background: linear-gradient(135deg, #EF8B32 0%, #EF8B32 50%, #E82134 50%, #E82134 100%);
    animation-delay: 0.2s;
    animation: fire_propulsion 0.3s ease-in infinite;
}
.fire-4 {
    position: absolute;
    height: 22px;
    width: 22px;
    top: 200px;
    transform-origin: 50% 50%;
    transform: rotate(-33deg) skew(0deg, -30deg);
    z-index: 20;
    left: 126px;
    background: linear-gradient(135deg, #E82134 0%, #E82134 50%, #EF8B32 50%, #EF8B32 100%);
    animation: fire_propulsion 0.3s ease-in infinite;
}
@keyframes fire_propulsion {
    0% {
        transform: translate(0, -10px) scale(1) rotate(-33deg) skew(0deg, -30deg);
        transform-origin: 50% 50%;
        opacity: 1;
    }
    100% {
        transform: translate(0, 50px) scale(0.7) rotate(-33deg) skew(0deg, -30deg);
        opacity: 0;
    }
}
.spark-1 {
    position: absolute;
    bottom: 77px;
    z-index: 20;
    right: 70px;
    width: 12px;
    height: 12px;
    background: #EF8B32;
    transform-origin: 50% 50%;
}
.spark-2 {
    position: absolute;
    bottom: 68px;
    z-index: 20;
    left: 132px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: #EF8B32;
    animation-delay: 0.22s;
}
.spark-3 {
    position: absolute;
    bottom: 80px;
    z-index: 20;
    left: 109px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: #E82134;
    animation-delay: 0.32s;
}
.spark-4 {
    position: absolute;
    bottom: 20px;
    left: 83px;
    z-index: 20;
    width: 10px;
    height: 10px;
    background: #EF8B32;
    animation-delay: 0.16s;
}
.propulsed, .spark-1, .spark-2, .spark-3, .spark-4 {
    animation: dancing_fire 0.24s infinite;
}
@keyframes dancing_fire {
    0% {
        transform-origin: 50% 50%;
        transform: translate(0, -10px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(0, 50px) scale(1);
        opacity: 0;
    }
}
.star {
    position: absolute;
    width: 4px;
    height: 20px;     
    border-radius:50%;
    z-index: 9999;
    animation: hyperspace 0.4s infinite;
    background: linear-gradient(135deg, #fc97e9 20%, #fafc9f 80%, #bdf4f9 100%) fixed;          
}    
.star-1 {
    left: 50px;
    top: -10px;      
    animation-delay: 0.10s;
}
.star-2 {
    right: 60px;
    top: 30px;
    animation-delay: 0.10s;
}
.star-3 {
    top: 80px;
    left: 25px;
    animation-delay: 0.2s;
}
.star-4 {
    top: -20px;
    right: 75px;
    animation-delay: 0.2s;
}
.star-5 {
    right: 30px;
    top: -60px;
    animation-delay: 0.30s;
}
.star-6 {
    right: 160px;
    top: 50px;
    animation-delay: 0.40s;
}
.star-7 {
    top: 20px;
    left: 75px;
    animation-delay: 0.3s;
}
.star-8 {
    top: -30px;
    right: 95px;
    animation-delay: 0.4s;
}
.star-9 {
    right: 30px;
    top: -60px;
    animation-delay: 0.30s;
}
.star-10 {
    right: 160px;
    top: 50px;
    animation-delay: 0.40s;
}
.star-11 {
    top: 20px;
    left: 75px;
    animation-delay: 0.3s;
}
.star-12 {
    top: -30px;
    right: 95px;
    animation-delay: 0.4s;
}
.star-13 {
    left: -30px;
    top: -60px;
    animation-delay: 0.30s;
}
.star-14 {
    right: -20px;
    top: 50px;
    animation-delay: 0.40s;
}
.star-15 {
    top: 20px;
    left: -75px;
    animation-delay: 0.3s;
}
.star-16 {
    top: -30px;
    right: -95px;
    animation-delay: 0.4s;
}

@keyframes hyperspace {
    0% {
        transform: translate(0, -100px) scale(1, 0);
        opacity: 1;
    }
    100% {
        transform: translate(0, 400px) scale(1, 1);
        opacity: 0;
    }
}