본문 바로가기

TUTORIAL


CSS Animation

CSS Animation - Rocket Animation [SVG, GSAP]

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="container">
<svg class="rocket" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 79 248" enable-background="new 0 0 79 248" xml:space="preserve">
    <g class="fire">
        <linearGradient id="fire-5_3_" gradientUnits="userSpaceOnUse" x1="22.5046" y1="153.1758" x2="22.5047" y2="189.7509">
            <stop offset="0" style="stop-color:#F37121"/>
            <stop offset="1" style="stop-color:#E34E27"/>
        </linearGradient>
        <path class="fire-5" fill-rule="evenodd" clip-rule="evenodd" fill="url(#fire-5_3_)" d="M25.9,143.2c6.2,20.8,2.7,34.5-3.5,48.4
c-5.9-12.8-8.9-27.2-4.1-48.4C19.2,139.4,24.8,139.8,25.9,143.2z"/>
        <path class="fire-4" fill-rule="evenodd" clip-rule="evenodd" fill="#F9A31A" d="M24.7,142.8c4.6,12.5,1.4,18.4-2.4,26.8
c-0.1,0.1-0.2,0.2-0.4,0.2c-0.2,0-0.4-0.1-0.4-0.2c-3.5-7.9-5.5-15.1-2.3-26.7C20,140.2,23.9,140.6,24.7,142.8z"/>
        <path class="fire-3" fill-rule="evenodd" clip-rule="evenodd" fill="#FAD06D" d="M23.8,142.5c2.6,6,1.2,10.2-1.3,14.4
c-0.1,0.2-0.3,0.3-0.6,0.3c-0.3,0-0.5-0.1-0.6-0.3c-2.3-3.8-2.7-9.3-0.8-14.4C21,141.1,23.2,141.3,23.8,142.5z"/>
        <path class="fire-2" fill-rule="evenodd" clip-rule="evenodd" fill="#FAE6B2" d="M23.2,142.5c1.3,3.6,0.6,6.1-0.6,9.1
c-0.1,0.1-0.2,0.2-0.5,0.2c-0.2,0-0.4-0.1-0.5-0.2c-1.1-2.9-1.8-5.6-0.6-9.2C21.4,141.3,22.8,141.6,23.2,142.5z"/>
        <path class="fire-1" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M22.7,142.9c0.6,1.8,0.3,3.1-0.3,4.6
c0,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1c-0.6-1.4-0.9-2.8-0.3-4.6C21.7,142.3,22.5,142.5,22.7,142.9z"/>
    </g>
    <g class="fire">
        <linearGradient id="fire-5_4_" gradientUnits="userSpaceOnUse" x1="58.1015" y1="153.1758" x2="58.1016" y2="189.7509">
            <stop offset="0" style="stop-color:#F37121"/>
            <stop offset="1" style="stop-color:#E34E27"/>
        </linearGradient>
        <path class="fire-5" fill-rule="evenodd" clip-rule="evenodd" fill="url(#fire-5_4_)" d="M61.5,143.2c6.2,20.8,2.7,34.5-3.5,48.4
c-5.9-12.8-8.9-27.2-4.1-48.4C54.8,139.4,60.4,139.8,61.5,143.2z"/>
        <path class="fire-4" fill-rule="evenodd" clip-rule="evenodd" fill="#F9A31A" d="M60.3,142.8c4.6,12.5,1.4,18.4-2.4,26.8
c-0.1,0.1-0.2,0.2-0.4,0.2c-0.2,0-0.4-0.1-0.4-0.2c-3.5-7.9-5.5-15.1-2.3-26.7C55.6,140.2,59.5,140.6,60.3,142.8z"/>
        <path class="fire-3" fill-rule="evenodd" clip-rule="evenodd" fill="#FAD06D" d="M59.4,142.5c2.6,6,1.2,10.2-1.3,14.4
c-0.1,0.2-0.3,0.3-0.6,0.3c-0.3,0-0.5-0.1-0.6-0.3c-2.3-3.8-2.7-9.3-0.8-14.4C56.6,141.1,58.8,141.3,59.4,142.5z"/>
        <path class="fire-2" fill-rule="evenodd" clip-rule="evenodd" fill="#FAE6B2" d="M58.8,142.5c1.3,3.6,0.6,6.1-0.6,9.1
c-0.1,0.1-0.2,0.2-0.5,0.2c-0.2,0-0.4-0.1-0.5-0.2c-1.1-2.9-1.8-5.6-0.6-9.2C57,141.3,58.4,141.6,58.8,142.5z"/>
        <path class="fire-1" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M58.2,142.9c0.6,1.8,0.3,3.1-0.3,4.6
c0,0.1-0.1,0.1-0.2,0.1s-0.2,0-0.2-0.1c-0.6-1.4-0.9-2.8-0.3-4.6C57.3,142.3,58.1,142.5,58.2,142.9z"/>
    </g>
    <g class="fire">
        <linearGradient id="fire-5_5_" gradientUnits="userSpaceOnUse" x1="40.1556" y1="154.07" x2="40.1557" y2="208.7984">
            <stop offset="0" style="stop-color:#F37121"/>
            <stop offset="1" style="stop-color:#E34E27"/>
        </linearGradient>
        <path class="fire-5" fill-rule="evenodd" clip-rule="evenodd" fill="url(#fire-5_5_)" d="M43.8,139.2c6.7,31.2,2.9,51.6-3.8,72.4
c-6.4-19.2-9.6-40.7-4.4-72.4C36.5,133.5,42.7,134,43.8,139.2z"/>
        <path class="fire-4" fill-rule="evenodd" clip-rule="evenodd" fill="#F9A31A" d="M42.6,138.5c5,18.8,1.5,27.6-2.5,40.2
c-0.1,0.2-0.2,0.3-0.4,0.3c-0.2,0-0.4-0.1-0.4-0.3c-3.8-11.8-5.9-22.5-2.5-40C37.4,134.6,41.7,135.2,42.6,138.5z"/>
        <path class="fire-3" fill-rule="evenodd" clip-rule="evenodd" fill="#FAD06D" d="M41.5,138.1c2.8,8.9,1.3,15.3-1.4,21.5
c-0.1,0.2-0.4,0.4-0.6,0.4c-0.3,0-0.5-0.1-0.6-0.4c-2.5-5.6-2.9-14-0.9-21.5C38.5,136,41,136.3,41.5,138.1z"/>
        <path class="fire-2" fill-rule="evenodd" clip-rule="evenodd" fill="#FAE6B2" d="M40.9,138.1c1.4,5.4,0.7,9.1-0.7,13.6
c-0.1,0.2-0.3,0.4-0.5,0.4c-0.2,0-0.4-0.1-0.5-0.4c-1.2-4.3-1.9-8.4-0.6-13.8C38.9,136.3,40.5,136.7,40.9,138.1z"/>
        <path class="fire-1" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M40.3,138.7c0.7,2.7,0.3,4.6-0.3,6.9
c0,0.1-0.1,0.2-0.3,0.2c-0.1,0-0.2-0.1-0.3-0.2c-0.6-2.1-1-4.3-0.3-6.9C39.3,137.8,40.1,138,40.3,138.7z"/>
    </g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M18.2,77.2c0.8-1.3,1.8-2.4,3-3.3v0c0.3-0.2,0.7-0.3,1.1-0.3
c0.4,0,0.7,0.1,1.1,0.3c1.1,0.8,2.2,2,3,3.3c0.7,1.2,1.2,2.5,1.2,3.7v52.3c0,0.4-0.2,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4h-7.6
c-0.4,0-0.7-0.2-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V80.9C17,79.7,17.5,78.4,18.2,77.2L18.2,77.2z M19.3,135.3h5.8
c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.4,0.4,0.5,0.7l1.2,3.4H16.8l1.2-3.4c0.1-0.3,0.3-0.5,0.5-0.7C18.7,135.4,19,135.3,19.3,135.3z"
        />
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#BCBEC0" d="M21.5,74.3c-2.1,1.5-3.9,4.2-3.9,6.5v52.3c0,0.5,0.4,0.9,0.9,0.9
H26c0.5,0,0.9-0.4,0.9-0.9V80.9c0-2.3-1.9-5-3.9-6.5C22.5,74,21.9,74,21.5,74.3L21.5,74.3z M19.3,135.8h5.8c0.4,0,0.7,0.2,0.8,0.6
l0.9,2.7h-9.4l0.9-2.7C18.6,136,18.9,135.8,19.3,135.8z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#959799" d="M19.4,136.4h1.7l-0.7,2.2h-1.9l0.6-2
C19.2,136.5,19.3,136.4,19.4,136.4L19.4,136.4z M18.2,80.9V133c0,0.1,0.1,0.3,0.3,0.3h2.3c0.1,0,0.3-0.1,0.3-0.3V80.9
c0-0.7-0.6-1.5-1.2-1.9c-0.1-0.1-0.3-0.1-0.4,0C18.8,79.4,18.2,80.2,18.2,80.9z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#E5E6E7" d="M25,80.9V133c0,0.1,0,0.3,0.1,0.3h0.8c0.1,0,0.1-0.1,0.1-0.3
V80.9c0-0.7-0.2-0.9-0.4-1.4c0-0.1-0.1-0.1-0.2,0C25.2,79.9,25,80.2,25,80.9L25,80.9z M25.1,136.4h-0.8l0.7,2.2h1l-0.6-2
C25.3,136.5,25.2,136.4,25.1,136.4z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M26.9,91h-9.4v0.5h9.4V91L26.9,91z M26.9,120.8h-9.4v0.5h9.4
V120.8L26.9,120.8z M26.9,105.9h-9.4v0.5h9.4V105.9z"/>
    </g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M26.3,77.2c0.7,1.2,1.2,2.5,1.2,3.7v52.3c0,0.4-0.2,0.7-0.4,1
c-0.3,0.3-0.6,0.4-1,0.4h-7.6c-0.4,0-0.7-0.2-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V80.9c0-1.2,0.5-2.5,1.2-3.7c0.8-1.3,1.9-2.5,3-3.3
c0.3-0.2,0.7-0.3,1.1-0.3c0.4,0,0.7,0.1,1.1,0.3v0C24.4,74.8,25.5,75.9,26.3,77.2L26.3,77.2z M26,135.5c0.2,0.2,0.4,0.4,0.5,0.7
l1.2,3.4H16.8l1.2-3.4c0.1-0.3,0.3-0.5,0.5-0.7c0.2-0.2,0.5-0.3,0.8-0.3h5.8C25.4,135.3,25.7,135.4,26,135.5z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#BCBEC0" d="M23,74.3c-0.4-0.3-1-0.3-1.5,0c-2.1,1.5-3.9,4.2-3.9,6.5v52.3
c0,0.5,0.4,0.9,0.9,0.9H26c0.5,0,0.9-0.4,0.9-0.9V80.9C26.9,78.6,25.1,75.9,23,74.3L23,74.3z M26,136.4l0.9,2.7h-9.4l0.9-2.7
c0.1-0.4,0.4-0.6,0.8-0.6h5.8C25.5,135.8,25.8,136,26,136.4z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#959799" d="M25.1,136.4c0.1,0,0.2,0.1,0.3,0.2l0.6,2H24l-0.7-2.2H25.1
L25.1,136.4z M25,78.9c-0.1-0.1-0.3-0.1-0.4,0c-0.6,0.5-1.2,1.3-1.2,1.9V133c0,0.1,0.1,0.3,0.3,0.3h2.3c0.1,0,0.3-0.1,0.3-0.3
V80.9C26.2,80.2,25.6,79.4,25,78.9z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#E5E6E7" d="M19.4,80.9c0-0.7-0.2-0.9-0.4-1.4c0-0.1-0.1-0.1-0.2,0
c-0.2,0.5-0.4,0.7-0.4,1.4V133c0,0.1,0,0.3,0.1,0.3h0.8c0.1,0,0.1-0.1,0.1-0.3V80.9L19.4,80.9z M19.1,136.6l-0.6,2h1l0.7-2.2h-0.8
C19.2,136.4,19.1,136.5,19.1,136.6z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M17.5,91v0.5h9.4V91H17.5L17.5,91z M17.5,120.8v0.5h9.4v-0.5
H17.5L17.5,120.8z M17.5,106.4h9.4v-0.5h-9.4V106.4z"/>
    </g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M53.3,77.2c0.8-1.3,1.8-2.4,3-3.3v0c0.3-0.2,0.7-0.3,1.1-0.3
c0.4,0,0.7,0.1,1.1,0.3c1.1,0.8,2.2,2,3,3.3c0.7,1.2,1.2,2.5,1.2,3.7v52.3c0,0.4-0.2,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4h-7.6
c-0.4,0-0.7-0.2-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V80.9C52.1,79.7,52.6,78.4,53.3,77.2L53.3,77.2z M54.4,135.3h5.8
c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.4,0.4,0.5,0.7l1.2,3.4H51.9l1.2-3.4c0.1-0.3,0.3-0.5,0.5-0.7C53.8,135.4,54.1,135.3,54.4,135.3z
"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#BCBEC0" d="M56.6,74.3c-2.1,1.5-3.9,4.2-3.9,6.5v52.3c0,0.5,0.4,0.9,0.9,0.9
h7.6c0.5,0,0.9-0.4,0.9-0.9V80.9c0-2.3-1.9-5-3.9-6.5C57.6,74,57.1,74,56.6,74.3L56.6,74.3z M54.4,135.8h5.8
c0.4,0,0.7,0.2,0.8,0.6l0.9,2.7h-9.4l0.9-2.7C53.7,136,54,135.8,54.4,135.8z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#959799" d="M54.5,136.4h1.7l-0.7,2.2h-1.9l0.6-2
C54.3,136.5,54.4,136.4,54.5,136.4L54.5,136.4z M53.4,80.9V133c0,0.1,0.1,0.3,0.3,0.3h2.3c0.1,0,0.3-0.1,0.3-0.3V80.9
c0-0.7-0.6-1.5-1.2-1.9c-0.1-0.1-0.3-0.1-0.4,0C53.9,79.4,53.4,80.2,53.4,80.9z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#E5E6E7" d="M60.1,80.9V133c0,0.1,0,0.3,0.1,0.3h0.8c0.1,0,0.1-0.1,0.1-0.3
V80.9c0-0.7-0.2-0.9-0.4-1.4c0-0.1-0.1-0.1-0.2,0C60.3,79.9,60.1,80.2,60.1,80.9L60.1,80.9z M60.2,136.4h-0.8l0.7,2.2h1l-0.6-2
C60.4,136.5,60.3,136.4,60.2,136.4z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M62,91h-9.4v0.5H62V91L62,91z M62,120.8h-9.4v0.5H62V120.8
L62,120.8z M62,105.9h-9.4v0.5H62V105.9z"/>
    </g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#DF5C3B" d="M31.5,64.1c1.6-2.3,4-4.4,6.4-5.9c0.6-0.4,1.2-0.5,1.9-0.5
c0.7,0,1.3,0.2,1.9,0.5c2.4,1.5,4.8,3.6,6.4,5.9c1.5,2.1,2.5,4.4,2.5,6.6v59.9c0,0.6-0.3,1.1-0.7,1.5c-0.4,0.4-1,0.6-1.7,0.6H31.4
c-0.7,0-1.2-0.2-1.7-0.6c-0.5-0.4-0.7-0.9-0.7-1.5V70.7C28.9,68.6,29.9,66.3,31.5,64.1z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#F27635" d="M38.2,58.7c-4.6,2.8-8.7,7.8-8.7,12v59.9c0,0.9,0.9,1.6,1.9,1.6
h16.8c1,0,1.9-0.7,1.9-1.6V70.7c0-4.2-4.1-9.2-8.7-12C40.4,58.1,39.1,58.1,38.2,58.7z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#F58C3D" d="M40.9,63.9c-2.6,1.6-4.9,4.4-4.9,6.8v58.6c0,0.5,0.5,0.9,1.1,0.9
h9.5c0.6,0,1.1-0.4,1.1-0.9V70.7c0-2.4-2.3-5.2-4.9-6.8C42.2,63.6,41.5,63.6,40.9,63.9z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#FBC399" d="M42.9,70.7V128c0,0.4,0.4,0.7,0.8,0.7H45c0.4,0,0.8-0.3,0.8-0.7
V70.7C45.8,68.2,42.9,68.3,42.9,70.7z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#DF5C3B" d="M50.4,81.7H29.1v0.5h21.3V81.7L50.4,81.7z M50.4,111.5H29.1v0.5
h21.3V111.5L50.4,111.5z M50.4,96.6H29.1v0.5h21.3V96.6z"/>
    </g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#373435" d="M65.1,125.7l-18.8,3.2l0.8,2.4c0.4,1.2-0.3,2.2-1.5,2.2H42
l-0.6,0.8c-0.8,1-2.4,1-3.1,0l-0.6-0.8H34c-1.3,0-1.9-1-1.5-2.2l0.8-2.4l-18.8-3.2c-0.5-0.1-0.8-0.5-0.7-1
c0.2-1.4,0.3-2.5,0.7-3.6c0.9-2.2,2.7-3.3,4.6-4.6c5.8-4.2,13.5-9.7,13.5-14.6v-9.8c0-2,0.6-4,1.5-5.8c1.1-2.1,2.6-4,4-5.2
c1-0.9,2.5-0.9,3.5,0c1.4,1.2,3,3.1,4,5.2C46.4,88,47,90,47,92.1v9.8c0,4.8,7.7,10.4,13.5,14.6c1.8,1.3,3.7,2.4,4.6,4.6
c0.4,1.1,0.6,2.3,0.7,3.6C65.8,125.2,65.5,125.6,65.1,125.7z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#DBE7EE" d="M45.7,128.5l19.3-3.3c0.2,0,0.4-0.3,0.3-0.5
c-0.3-2.7-0.5-4.6-3-6.4c-5.9-4.3-15.8-10.7-15.8-16.5v-9.8c0-4.4-2.8-8.4-5.3-10.6c-0.8-0.7-2.1-0.7-2.9,0
c-2.5,2.2-5.3,6.2-5.3,10.6v9.8c0,5.7-9.9,12.1-15.8,16.5c-2.4,1.8-2.7,3.7-3,6.4c0,0.2,0.1,0.4,0.3,0.5l19.3,3.3l-0.9,2.9
c-0.3,0.9,0.2,1.6,1.1,1.6h3.8l0.7,1c0.3,0.4,0.7,0.6,1.2,0.6c0.5,0,0.9-0.2,1.2-0.6l0.7-1h3.8c0.9,0,1.4-0.7,1.1-1.6L45.7,128.5z
"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#EBF3F6" d="M39.8,134.5c0.5,0,0.9-0.2,1.2-0.6l0.7-1h3.8c1,0,1.4-0.7,1-1.8
l-0.1-0.4l-0.7-2.3l0.7-0.1l0.1,0c0-8.8,0-17.6,0-26.5v-9.4c0-2.5-0.5-4.4-1.7-6.6c-0.7-1.2-1.5-2.4-2.4-3.3
c-0.4-0.4-0.8-0.8-1.2-1.2c-0.4-0.4-0.9-0.5-1.4-0.5C39.8,98.8,39.8,116.6,39.8,134.5z"/>
        <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FDFDFD" points="44.7,131.6 42.2,131.6 42.2,89.4 43.5,89.9 42.2,88.6
42.2,83.8 43.7,85.9 43.7,129.2 		"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#C4CDD2" d="M41.7,128.4v4.5h0.4v-1.1h4.6l-0.1-0.4h-4.6v-1.1h4.2l-0.1-0.4
h-4.1v-1.2h3.7l-0.1-0.4H41.7L41.7,128.4z M46.7,100v0.4H40v9.5h6.7v0.4H40v9.5h6.7v0.4H40v14.4h-0.4v-14.4h-6.9v-0.4h6.9v-9.5
h-6.9v-0.4h6.9v-9.5h-6.9V100h6.9V82H40v18H46.7L46.7,100z M37.8,128.4h-3.9l-0.1,0.4h3.7v1.2h-4.1l-0.1,0.4h4.2v1.1h-4.6
l-0.1,0.4h4.6v1.1h0.4V128.4z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#373435" d="M44,84c-0.2-0.3-1.4-1.5-1.6-1.8c-1.7-2.1-3.4-2.1-5.1,0
C37,82.5,36,83.7,35.7,84C38.2,82.3,41.3,82.1,44,84L44,84z M26.1,127.4v-3.2h-6.6v2.1h-0.4v-2.1h-5v-0.7h5h0.4h6.6h0.4h6.2V91H33
v37.5h-0.4v-4.4h-6.2v3.2H26.1L26.1,127.4z M53.4,127.4v-3.2H60v2.1h0.4v-2.1h5v-0.7h-5H60h-6.6H53h-6.2V91h-0.4v37.5h0.4v-4.4H53
v3.2H53.4L53.4,127.4z M36.6,89.7c2.1-1,4.2-1,6.3,0c0.3,0.1,0.6,0.3,0.9,0.5c-0.3-0.3-0.6-0.6-0.9-0.9c-2.1-2.1-4.2-2.1-6.3,0
c-0.3,0.3-0.6,0.6-0.9,0.9C36.1,90,36.4,89.8,36.6,89.7z"/>
    </g>
</svg>
<div class="sky">
    <div class="sky-bg"></div>
    <div class="sky-bg"></div>
</div>
</div>
    










    













































* {margin: 0; padding: 0;}
html {
    font-size: 60%;
    overflow: hidden;
}
.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.rocket {
    height: 50em;
    transform: translatey(100vh);
}
.sky {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-color: #000;
    height: 200vh;
    z-index: -1;
}
.sky-bg {
    height: 100vh;
    background-size: 30rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.05 259.2"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path 
    d="M115.66,178.42a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM85,106.62a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm30.47,
    125.84a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM86.79,248.39a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-80,
    2.38a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM19.3,199.46a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm58.7-32a.77.77,0,
    1,0,.77.77.77.77,0,0,0-.77-.77Zm-36.9-1.53a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM79.63,201a.77.77,0,1,0,
    .77.77.77.77,0,0,0-.77-.77Zm60.79-110.3a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM52.93,15.78a.77.77,0,1,0,
    .77.77.77.77,0,0,0-.77-.77ZM81.16,65.59a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM28.54,112.91a.77.77,0,1,0,
    .77.77.77.77,0,0,0-.77-.77ZM122,171.59a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-79.5,46.86a.77.77,0,1,0,
    .77.77.77.77,0,0,0-.77-.77Zm40.06-85.27a.6.6,0,1,0,.6.6.6.6,0,0,0-.6-.6ZM48.1,140.69a.6.6,0,1,0,.6.6.6.6,
    0,0,0-.6-.6ZM56.33,156a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM34.76,203.62a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM42.17,
    214a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-15,20.89a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM.3,244.27a.3.3,0,1,
    0,.3.3.3.3,0,0,0-.3-.3Zm22-62.4a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM18.66,186a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm79.59-7.39a.3.3,
    0,1,0,.3.3.3.3,0,0,0-.3-.3ZM91.5,171a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-29,83.17a.3.3,0,1,0,.3.3.3.3,0,0,
    0-.3-.3Zm37.48-9.3a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-28.69-5.7a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM68.4,
    31.72a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM125,119.09a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-97.2,21.08a.3.3,0,1,0,.3.3.3.3,0,
    0,0-.3-.3ZM106.5,199a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm6.75,9.9a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-59.85.6a.3.3,0,1,0,
    .3.3.3.3,0,0,0-.3-.3Zm56.91-116.9a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM18.69,168.48a.39.39,0,1,0,.39.39.39.39,
    0,0,0-.39-.39Zm63.62-21.42a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM43,26.62a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm.24,
    34.19a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM17.35,92.25a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM101,46.12a.39.39,0,
    1,0,.39.39.39.39,0,0,0-.39-.39Zm26.25-31.5a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm-.39-11.76a.39.39,0,1,0,.39.39.39.39,
    0,0,0-.39-.39ZM89.27,6.94a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM13.71,1.7a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm104.4,
    64.47a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm9.77,157.38a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm-29.63-41a.39.39,0,1,
    0,.39.39.39.39,0,0,0-.39-.39ZM14.68,212.4a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM8.93,135.84a.39.39,0,1,0,.39.39.39.39,
    0,0,0-.39-.39ZM114.41,56.6a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm20.75-44.86a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-118.58,
    78a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm19-82.56a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM2.81,26.71a.77.77,0,1,
    0,.77.77.77.77,0,0,0-.77-.77ZM134.39,141.54a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM5.3,210.86a.77.77,0,1,0,.77.77.77.77,
    0,0,0-.77-.77Zm78.17-53a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm37.56,88a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-86.41,
    1.43a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm39-15.5a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-31.88-163a.77.77,0,1,0,
    .77.77.77.77,0,0,0-.77-.77ZM107.24,12.7a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm20.73,51a.77.77,0,1,0,.77.77.77.77,0,0,
    0-.77-.77ZM14.35,5.22a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM57.57,12a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM86.49,
    3.24a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm32.44,15.51a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm.26-11.81a.26.26,0,1,
    0,.26.26.26.26,0,0,0-.26-.26Zm18,65.51a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-18-22.86a.26.26,0,1,0,.26.26.26.26,0,0,
    0-.26-.26ZM83.48,59.1a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm44.41,46.26a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-99.52,
    11a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM10.09,73.91a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm89.39,44.44a.26.26,0,1,
    0,.26.26.26.26,0,0,0-.26-.26Zm5.78,59.57a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm28.1,17.48a.26.26,0,1,0,.26.26.26.26,
    0,0,0-.26-.26Zm-33.9,28.28a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm36.91,28.7a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM64.26,
    109.62a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm1.46,3.44a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-64.87-7a.26.26,0,1,0,
    .26.26.26.26,0,0,0-.26-.26Zm44,16.79a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM50.7,75.37a.26.26,0,1,0,.26.26.26.26,0,0,
    0-.26-.26ZM83.22,85.52a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM94.7,51a.26.26,0,1,0,.26.26A.26.26,0,0,0,94.7,51Zm28.59,
    5a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm13.59-16.51a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-17.7-4.41a.26.26,0,1,0,
    .26.26.26.26,0,0,0-.26-.26Zm-76.6,14.4a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-28.49-8a.26.26,0,1,0,.26.26.26.26,0,0,
    0-.26-.26Zm4-22.58a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-8-11.81a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-5.31-4A.26.26,
    0,1,0,5,3.5a.26.26,0,0,0-.26-.26ZM47.19,96a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm70.54,49.47a.26.26,0,1,0,.26.26.26.26,
    0,0,0-.26-.26Zm24.07-61.44a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM35.66,86.57a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM89.91,
    36.64a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm51.63-19.35a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-4.14,29.8a.26.26,0,
    1,0,.26.26.26.26,0,0,0-.26-.26ZM47.19.75a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM9.58,42.08a.26.26,0,1,0,.26.26.26.26,0,
    0,0-.26-.26Zm7.89-18.9a.26.26,0,1,0,.26.26A.26.26,0,0,0,17.46,23.17Z" fill="%23fefefe" fill-rule="evenodd"/><path 
    d="M65,10.54a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm66,229.22a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM115.83,81.52a.42.42,
    0,1,0,.42.42.42.42,0,0,0-.42-.42Zm.84,32.92a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM121,208.1a.42.42,0,1,0,.42.42.42.42,0,
    0,0-.42-.42Zm-93.85-9.9a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM65.83,126a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm66.08,
    56.49a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm-93.15-.15a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM138.83,87.84a.49.49,0,
    1,0,.49.49.49.49,0,0,0-.49-.49ZM35.57,1.81a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM83,52.51a.49.49,0,1,0,.49.49.49.49,0,
    0,0-.49-.49ZM81.09,73.68a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm32.55,73.76a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM13.81,
    147a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm0,76.49a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM23.35,58.64a.49.49,0,1,
    0,.49.49.49.49,0,0,0-.49-.49ZM114.41,12.7a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM2,40.16a.49.49,0,1,0,.49.49A.49.49,
    0,0,0,2,40.16Zm49.41,6a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm57,212.11a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM4.81,
    167.51a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm134,1.92a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM9.32,121.08a.49.49,0,
    1,0,.49.49.49.49,0,0,0-.49-.49Zm129.28,7a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM8.11,60.56a.26.26,0,1,0,.26.26.26.26,
    0,0,0-.26-.26ZM.86,0a.38.38,0,1,0,.38.38A.38.38,0,0,0,.86,0ZM134.77,6.45a.38.38,0,1,0,.38.38.38.38,0,0,0-.38-.38Zm-4.82,
    36a.38.38,0,1,0,.38.38A.38.38,0,0,0,129.95,42.47Z" fill="%2300afef" fill-rule="evenodd"/><path d="M125,7.71a.49.49,
    0,1,0,.49.49.49.49,0,0,0-.49-.49Zm-107,242.22a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm43.87-6.5a.42.42,0,1,0,.42.42.42.42,
    0,0,0-.42-.42ZM27.16,129.18a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm78.62,12.72a.42.42,0,1,0,.42.42.42.42,0,
    0,0-.42-.42ZM55.61,177.76a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM8,193.6a.42.42,0,1,0,.42.42A.42.42,0,0,0,8,
    193.6ZM38.28,97.67a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm53.34,6.18a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm-42.5,
    44.94a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm73.2,30.42a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM94.44,49.57a.49.49,
    0,1,0,.49.49.49.49,0,0,0-.49-.49Zm41.49,172a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM.49,78a.49.49,0,1,0,.49.49A.49.49,
    0,0,0,.49,78Zm134.66,37.82a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM5.53,145.52A.49.49,0,1,0,6,
    146a.49.49,0,0,0-.49-.49ZM106.76,84.81a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM21.43,41.13a.49.49,0,1,0,.49.49A.49.49,
    0,0,0,21.43,41.13Z" fill="%23ec268f" fill-rule="evenodd"/></g></g></svg>');
}

































































TweenMax.fromTo(".fire", .03, { x:-.5, y:-.4 }, {x: .5, y: .4, repeat: -1, yoyo: true})

var tl = new TimelineMax({ repeat: -1 }),
    tl_sky = new TimelineMax({ repeat: -1});

tl_sky.fromTo(".sky", 12, {transform:"translateY(-100vh)"}, {transform:"translateY(0vh)", ease:Power0.easeNone});

tl.to(".rocket", 3, {transform: "translateY(-5vh)", ease:Expo.easeOut})
    .fromTo(".fire", .4, {scaleY: .8}, {scaleY: 1.5}, "+=1.5")
    .add(() => tl_sky.timeScale(25), "-=.4" )
    .to(".rocket", 2, {transform: "translateY(-130vh)", ease:Power3.easeOut}, "+=1.5")
    .add(() => TweenMax.to(tl_sky, 1.5, {timeScale:2}));

tl_sky.timeScale(1);