Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Crtanje</title>
        <link href="stil.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="container">
            <div id="stage">
            </div>
            <div id="pozadina">
            </div>
            <div id="sipka">
            </div>
            <div id="uteglijevi1">
            </div>
            <div id="uteglijevi2">
            </div>
            <div id="uteglijevi3">
            </div>
            <div id="uteglijevi4">
            </div>
            <div id="uteglijevi5">
            </div>
            <div id="uteglijevi6">
            </div>
            <div id="utegdesni1">
            </div>
            <div id="utegdesni2">
            </div>
            <div id="utegdesni3">
            </div>
            <div id="utegdesni4">
            </div>
            <div id="utegdesni5">
            </div>
            <div id="utegdesni6">
            </div>
            <div id="glava">
                <div class="dio" id="dio1"></div>
                <div class="dio" id="dio2"></div>
                <div class="dio" id="dio3"></div>
                <div class="dio" id="dio4"></div>
                <div class="dio" id="dio5"></div>
                <div class="dio" id="dio6"></div>
                <div class="dio" id="dio7"></div>
                <div class="dio" id="dio8"></div>
                <div class="dio" id="dio9"></div>
            </div>
            <dv id="tijelo">
            </dv>
            <div id="rukavlijevi">
            </div>
            <div id="rukavdesni">
            </div>
            <div id="rukalijeva">
            </div>
            <div id="rukadesna">
            </div>
            <div id="kratkehlacelijevo">
            </div>
            <div id="kratkehlacedesno">
            </div>
            <div id="lijevilist">
            </div>
            <div id="desnilist">
            </div>
        </div>
    </body>
</html>
              
            
!

CSS

              
                #container {
    width: 800px;
    height: 800px;
    margin: auto;
    position: relative;
    border: 1px solid black;
    background-color: orange;
}

#pozadina {
    width: 200px;
    height: 200px;
    margin: auto;
    position: relative;
    background-color: yellow;
    top: 50px;
    border: 0px solid transparent;
    border-radius: 50%;
}

#stage {
    width: 800px;
    height: 100px;
    position: absolute;
    bottom: 0px;
    background-color: saddlebrown;
}

#sipka {
    width: 400px;
    height: 7px;
    position: absolute;
    bottom: 135px;
    left: 200px;
    background-color: grey;
    animation-name: sipka;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#uteglijevi1 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    left: 250px;
    background-color: black;
    animation-name: uteglijevi1;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#uteglijevi2 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    left: 243px;
    background-color: black;
    animation-name: uteglijevi2;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#uteglijevi3 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    left: 236px;
    background-color: black;
    animation-name: uteglijevi3;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#uteglijevi4 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    left: 229px;
    background-color: black;
    animation-name: uteglijevi4;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#uteglijevi5 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    left: 222px;
    background-color: black;
    animation-name: uteglijevi5;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#uteglijevi6 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    left: 215px;
    background-color: black;
    animation-name: uteglijevi6;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#utegdesni1 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 250px;
    background-color: black;
    animation-name: utegdesni1;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#utegdesni2 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 243px;
    background-color: black;
    animation-name: utegdesni2;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#utegdesni3 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 236px;
    background-color: black;
    animation-name: utegdesni3;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#utegdesni4 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 229px;
    background-color: black;
    animation-name: utegdesni4;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#utegdesni5 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 222px;
    background-color: black;
    animation-name: utegdesni5;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#utegdesni6 {
    width: 7px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 215px;
    background-color: black;
    animation-name: utegdesni6;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 2s;
    z-index: 2;
}

#glava {
   width: 80px;
    height: 80px;
    position: absolute;
    bottom: 375px;
    left: 360px;
    background-color: burlywood;
    animation-name: glava;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
    z-index: 4;
}

#tijelo {
    width: 80px;
    height: 125px;
    position: absolute;
    bottom: 250px;
    left: 360px;
    background-color: darkred;
    z-index: 2;
    animation-name: tijelo;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#rukavlijevi {
    width: 30px;
    height: 35px;
    position: absolute;
    bottom: 340px;
    left: 330px;
    background-color: darkred;
    animation-name: lijevirukav;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#rukavdesni {
    width: 30px;
    height: 35px;
    position: absolute;
    bottom: 340px;
    right: 330px;
    background-color: darkred;
    animation-name: desnirukav;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#rukalijeva {
    width: 30px;
    height: 120px;
    position: absolute;
    bottom: 220px;
    left: 330px;
    background-color: burlywood;
    animation-name: rukalijeva;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
    z-index: 2;
}

#rukadesna {
    width: 30px;
    height: 120px;
    position: absolute;
    bottom: 220px;
    right: 330px;
    background-color: burlywood; 
    animation-name: rukadesna;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
    z-index: 2;
}

#kratkehlacelijevo {
    width: 40px;
    height: 80px;
    position: absolute;
    bottom: 170px;
    left: 360px;
    background-color: cadetblue;
    animation-name: kratkehlacelijevo;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
    z-index: 1;
}

#kratkehlacedesno {
    width: 40px;
    height: 80px;
    position: absolute;
    bottom: 170px;
    right: 360px;
    background-color: cadetblue;
    animation-name: kratkehlacedesno;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
    z-index: 1;
}

#lijevilist {
    width: 40px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    left: 360px;
    background-color: burlywood;
    animation-name: lijevilist;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#desnilist {
    width: 40px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 360px;
    background-color: burlywood;
    animation-name: desnilist;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

.dio {
    display: inline-block;
    width: 20px;
    height: 20px;
    z-index: 0;
    transform: translateX(5px);
}

#dio1 {
    background-color: transparent;
    animation-name: dio1;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#dio2 {
    background-color: transparent;
    animation-name: dio2;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#dio3 {
    background-color: transparent;
    animation-name: dio3;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#dio4 {
    background-color: transparent;
    animation-name: dio4;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#dio5 {
    background-color: transparent;
    animation-name: dio5;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#dio6 {
    background-color: transparent;
    animation-name: dio6;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#dio7 {
    background-color: transparent;
    animation-name: dio7;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#dio8 {
    background-color: transparent;
    animation-name: dio8;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

#dio9 {
    background-color: transparent;
    animation-name: dio9;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    animation-delay: 1s;
}

@keyframes dio1 {
    0% {
        
    }
    
    64% {
        background-color: transparent;
    }
    
    66% {
        background-color: burlywood;
        transform: translateX(0px) translateY(0px);
    }
    
    100% {
        background-color: burlywood;
        transform: translateX(-160px) translateY(-200px);
    }
}

@keyframes dio2 {
    0% {
        
    }
    
    64% {
        background-color: transparent;
    }
    
    66% {
        background-color: burlywood;
        transform: translateX(0px) translateY(0px);
    }
    
    100% {
        background-color: burlywood;
        transform: translateX(-120px) translateY(-100px);
    }
}

@keyframes dio3 {
    0% {
        
    }
    
    64% {
        background-color: transparent;
    }
    
    66% {
        background-color: burlywood;
        transform: translateX(0px) translateY(0px);
    }
    
    100% {
        background-color: burlywood;
        transform: translateX(-20px) translateY(-80px);
    }
}

@keyframes dio4 {
    0% {
        
    }
    
    64% {
        background-color: transparent;
    }
    
    66% {
        background-color: burlywood;
        transform: translateX(0px) translateY(0px);
    }
    
    100% {
        background-color: burlywood;
        transform: translateX(30px) translateY(200px);
    }
}

@keyframes dio5 {
    0% {
        
    }
    
    64% {
        background-color: transparent;
    }
    
    66% {
        background-color: burlywood;
        transform: translateX(0px) translateY(0px);
    }
    
    100% {
        background-color: burlywood;
        transform: translateX(120px) translateY(-250px);
    }
}

@keyframes dio6 {
    0% {
        
    }
    
    64% {
        background-color: transparent;
    }
    
    66% {
        background-color: burlywood;
        transform: translateX(0px) translateY(0px);
    }
    
    100% {
        background-color: burlywood;
        transform: translateX(50px) translateY(-210px);
    }
}

@keyframes dio7 {
    0% {
        
    }
    
    64% {
        background-color: transparent;
    }
    
    66% {
        background-color: burlywood;
        transform: translateX(0px) translateY(0px);
    }
    
    100% {
        background-color: burlywood;
        transform: translateX(-310px) translateY(-10px);
    }
}

@keyframes dio8 {
    0% {
        
    }
    
    64% {
        background-color: transparent;
    }
    
    66% {
        background-color: burlywood;
        transform: translateX(0px) translateY(0px);
    }
    
    100% {
        background-color: burlywood;
        transform: translateX(-140px) translateY(-230px);
    }
}

@keyframes dio9 {
    0% {
        
    }
    
    64% {
        background-color: transparent;
    }
    
    66% {
        background-color: burlywood;
        transform: translateX(0px) translateY(0px);
    }
    
    100% {
        background-color: burlywood;
        transform: translateX(-110px) translateY(-200px);
    }
}

@keyframes kratkehlacelijevo {
    0% {
        
    }
    
    2% {
        transform: rotate(90deg) translateY(40px) translateX(40px);
    }
    
    4% {
        transform: rotate(0deg) translateY(0px) translateX(0px);
    }
    
    48% {
        transform: rotate(0deg) translateY(0px) translateX(0px);
    }
    
    50% {
        transform: rotate(0deg) translateY(0px) translateX(0px);
    }
    
    52% {
        transform: rotate(90deg) translateY(40px) translateX(40px);
    }
    
    54% {
        transform: rotate(0deg) translateY(0px) translateX(0px);
    }
    
    100% {
        
    }
}

@keyframes kratkehlacedesno {
    0% {
        
    }
    
    2% {
        transform: rotate(-90deg) translateY(40px) translateX(-40px);
    }
    
    4% {
        transform: rotate(0deg) translateY(0px) translateX(0px);
    }
    
    48% {
        transform: rotate(0deg) translateY(0px) translateX(0px);
    }
    
    50% {
        transform: rotate(0deg) translateY(0px) translateX(0px);
    }
    
    52% {
        transform: rotate(-90deg) translateY(40px) translateX(-40px);
    }
    
    54% {
        transform: rotate(0deg) translateY(0px) translateX(0px);
    }
    
    100% {
        
    }
}

@keyframes lijevilist {
    0% {
        
    }
    
    2% {
        transform: translateX(-60px);
    }
    
    4% {
        transform: translateX(0px);
    }
    
    48% {
        transform: translateX(0px);
    }
    
    50% {
        transform: translateX(0px);
    }
    
    52% {
        transform: translateX(-60px);
    }
    
    54% {
        transform: translateX(0px);
    }
    
    100% {
        
    }
}

@keyframes desnilist {
    0% {
        
    }
    
    2% {
        transform: translateX(60px);
    }
    
    4% {
        transform: translateX(0px);
    }
    
    48% {
        transform: translateX(0px);
    }
    
    50% {
        transform: translateX(0px);
    }
    
    52% {
        transform: translateX(60px);
    }
    
    54% {
        transform: translateX(0px);
    }
    
    100% {
        
    }
}

@keyframes tijelo {
    0% {
        
    }
    
    2% {
        transform: translateY(100px);
    }
    
    4% {
        transform: translateY(0px);
    }
    
    48% {
        transform: translateY(0px);
    }
    
    50% {
        transform: translateY(0px);
    }
    
    52% {
        transform: translateY(100px);
    }
    
    54% {
        transform: translateY(0px);
    }
    
    100% {
        
    }
}

@keyframes rukadesna {
    0% {
        
    }
    
    2% {
        transform: translateY(100px);
    }
    
    4% {
        transform: translateY(0px);
    }
    
    48% {
        transform: translateY(0px);
    }
    
    50% {
        transform: translateY(0px);
    }
    
    52% {
        transform: translateY(100px);
    }
    
    54% {
        transform: translateY(0px);
    }
    
    100% {
        
    }
}

@keyframes rukalijeva {
    0% {
        
    }
    
    2% {
        transform: translateY(100px);
    }
    
    4% {
        transform: translateY(0px);
    }
    
    48% {
        transform: translateY(0px);
    }
    
    50% {
        transform: translateY(0px);
    }
    
    52% {
        transform: translateY(100px);
    }
    
    54% {
        transform: translateY(0px);
    }
    
    100% {
        
    }
}

@keyframes desnirukav {
    0% {
        
    }
    
    2% {
        transform: translateY(100px);
    }
    
    4% {
        transform: translateY(0px);
    }
    
    48% {
        transform: translateY(0px);
    }
    
    50% {
        transform: translateY(0px);
    }
    
    52% {
        transform: translateY(100px);
    }
    
    54% {
        transform: translateY(0px);
    }
    
    100% {
        
    }
      
}

@keyframes lijevirukav {
    0% {
        
    }
    
    2% {
        transform: translateY(100px);
    }
    
    4% {
        transform: translateY(0px);
    }
    
    48% {
        transform: translateY(0px);
    }
    
    50% {
        transform: translateY(0px);
    }
    
    52% {
        transform: translateY(100px);
    }
    
    54% {
        transform: translateY(0px);
    }
    
    100% {
        
    }
}

@keyframes glava {
    0% {
        
    }
    
    2% {
        transform: translateY(100px);
    }
    
    4% {
        transform: translateY(0px);
    }
    
    48% {
        transform: translateY(0px);
    }
    
    50% {
        transform: translateY(0px);
    }
    
    52% {
        transform: translateY(100px);
    }
    
    54% {
        transform: translateY(0px);
        background-color: burlywood;
    }
    
    56% {
        transform: scale(1.1) rotate(2deg);
        background-color: #fab88a;
    }
    
    58% {
        transform: scale(1.2) rotate(-2deg);
        background-color: #feab8a;
    }
    
    60% {
        transform: scale(1.3) rotate(-2deg);
        background-color: #fe9878;
    }
    
    62% {
        transform: scale(1.4) rotate(2deg);
        background-color: #ff7867;
    }
    
    64% {
        transform: scale(1.5) rotate(-2deg);
        background-color: #ff402e;
    }
    
    66% {
        background-color: transparent;
    }
    
    100% {
        background-color: transparent;
    }
    
}

@keyframes sipka {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-100px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-100px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-100px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-100px) rotate(5deg);
    }
    
    14% {
        transform: translateY(-100px) rotate(5deg);
    }
    
    16% {
        transform: translateY(-100px) rotate(5deg);
    }
    
    18% {
        transform: translateY(-100px) rotate(-5deg);
    }
    
    20% {
        transform: translateY(-100px) rotate(-5deg);
    }
    
    22% {
        transform: translateY(-100px) rotate(-5deg);
    }
    
    24% {
        transform: translateY(-100px) rotate(5deg);
    }
    
    26% {
        transform: translateY(-100px) rotate(5deg);
    }
    
    28% {
        transform: translateY(-100px) rotate(5deg);
    }
    
    30% {
        transform: translateY(-100px) rotate(-5deg);
    }
    
    32% {
        transform: translateY(-100px) rotate(-5deg);
    }
    
    34% {
        transform: translateY(-100px) rotate(-5deg);
    }
    
    36% {
        transform: translateY(-100px) rotate(5deg);
    }
    
    38% {
        transform: translateY(-100px) rotate(5deg);
    }
    
    40% {
        transform: translateY(-100px) rotate(5deg);
    }
    
    42% {
        transform: translateY(-100px) rotate(0deg);
    }
    
    44% {
        transform: translateY(-100px) rotate(0deg);
    }
    
    46% {
        transform: translateY(-100px) rotate(0deg);
    }
    
    48% {
        transform: translateY(-100px) rotate(0deg);
    }
    
    50% {
        transform: translateY(5px) rotate(0deg);
    }
}

@keyframes uteglijevi1 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    14% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    16% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    18% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    20% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    22% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    24% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    26% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    28% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    30% {
        transform: translateY(-80px) rotate(-5deg) translateX(-50px);
    }
    
    32% {
        transform: translateX(-90px) translateY(10px) rotate(-90deg);
    }
    
    100% {
        transform: translateX(-90px) translateY(10px) rotate(-90deg);
    }
}

@keyframes uteglijevi2 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    14% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    16% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    18% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    20% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    22% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    24% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    26% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    28% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    30% {
        transform: translateY(-80px) rotate(-5deg) translateX(-55px);
    }
    
    32% {
        transform: translateX(-90px) translateY(15px) rotate(-90deg);
    }
    
    100% {
        transform: translateX(-90px) translateY(15px) rotate(-90deg);
    }
}

@keyframes uteglijevi3 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    14% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    16% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    18% {
        transform: translateY(-85px) rotate(-5deg) translateX(-35px);
    }
    
    20% {
        transform: translateX(-90px) translateY(20px) rotate(-90deg);
    }
    
    100% {
        transform: translateX(-90px) translateY(20px) rotate(-90deg);
    }
}

@keyframes uteglijevi4 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-90px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    14% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    16% {
        transform: translateY(-110px) rotate(5deg);
    }
    
    18% {
        transform: translateY(-80px) rotate(-5deg) translateX(-45px);
    }
    
    20% {
        transform: translateX(-90px) translateY(26px) rotate(-90deg);
    }
      
    100% {
        transform: translateX(-90px) translateY(26px) rotate(-90deg);
    }
}

@keyframes uteglijevi5 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-85px) rotate(-5deg) translateX(-20px);
    }
    
    8% {
        transform: translateX(-90px) translateY(32px) rotate(-90deg);
    }
    
    100% {
        transform: translateX(-90px) translateY(32px) rotate(-90deg);
    }
}

@keyframes uteglijevi6 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-85px) rotate(-5deg) translateX(-30px);
    }
    
    8% {
        transform: translateX(-90px) translateY(38px) rotate(-90deg);
    }
    
    100% {
        transform: translateX(-90px) translateY(38px) rotate(-90deg);
    }
}

@keyframes utegdesni1 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    14% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    16% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    18% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    20% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    22% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    24% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    26% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    28% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    30% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    32% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    34% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    36% {
        transform: translateY(-90px) rotate(5deg) translateX(50px);
    }
    
    38% {
        transform: translateX(90px) translateY(12px) rotate(90deg);
    }
    
    100% {
        transform: translateX(90px) translateY(12px) rotate(90deg);
    }
}

@keyframes utegdesni2 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    14% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    16% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    18% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    20% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    22% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    24% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    26% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    28% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    30% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    32% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    34% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    36% {
        transform: translateY(-90px) rotate(5deg) translateX(55px);
    }
    
    38% {
        transform: translateX(90px) translateY(17px) rotate(90deg);
    }
    
    100% {
        transform: translateX(90px) translateY(17px) rotate(90deg);
    }
    
    100% {
        
    }
}

@keyframes utegdesni3 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    14% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    16% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    18% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    20% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    22% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    24% {
        transform: translateY(-90px) rotate(5deg) translateX(42px);
    }
    
    26% {
        transform: translateX(90px) translateY(23px) rotate(90deg);
    }
    
    100% {
        transform: translateX(90px) translateY(23px) rotate(90deg);
    }
}

@keyframes utegdesni4 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    14% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    16% {
        transform: translateY(-90px) rotate(5deg);
    }
    
    18% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    20% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    22% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    24% {
        transform: translateY(-90px) rotate(5deg) translateX(45px);
    }
    
    26% {
        transform: translateX(90px) translateY(29px) rotate(90deg);
    }
    
    100% {
        transform: translateX(90px) translateY(29px) rotate(90deg);
    }
}

@keyframes utegdesni5 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-90px) rotate(5deg) translateX(20px);
    }
    
    14% {
        transform: translateX(90px) translateY(35px) rotate(90deg);
    }
    
    100% {
        transform: translateX(90px) translateY(35px) rotate(90deg);
    }
}

@keyframes utegdesni6 {
    0% {
        
    }
    
    2% {
        transform: translateY(-100px);
    }
    
    4% {
        transform: translateY(-100px);
    }
    
    6% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    8% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    10% {
        transform: translateY(-110px) rotate(-5deg);
    }
    
    12% {
        transform: translateY(-90px) rotate(5deg) translateX(30px);
    }
    
    14% {
        transform: translateX(90px) translateY(38px) rotate(90deg);
    }
    
    100% {
        transform: translateX(90px) translateY(38px) rotate(90deg);
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console