JSFiddle - React, Tailwind, and code Playground

by Gothor

HTML

<div class="pendante">
    <div class="fil"></div>
    <img class="pendante" src="http://3.bp.blogspot.com/_xDpoN6UfFFY/Smw8u2HZ2kI/AAAAAAAAAsM/AExaPz1phR8/s320/1248602539_image.png" alt="Ici" />
</div>

<div id="sky">
    <div class="star" style="top : 20px; left : 100px; width : 5px; height : 5px; -moz-animation-duration : 1s; -webkit-animation-duration : 1.5s"></div>
    <div class="star"style="top : 10px; left : 200px; width : 4px; height : 4px; -moz-animation-duration : 3s; -webkit-animation-duration : 3s"></div>
    <div class="star"style="top : 23px; left : 275px; width : 2px; height : 2px; -moz-animation-duration : 1s; -webkit-animation-duration : 1s"></div>
    <div class="star"style="top : 17px; left : 413px; width : 3px; height : 3px; -moz-animation-duration : 2s; -webkit-animation-duration : 2s"></div>
</div>

<img class="shaker" src="http://3.bp.blogspot.com/_xDpoN6UfFFY/Smw8u2HZ2kI/AAAAAAAAAsM/AExaPz1phR8/s320/1248602539_image.png" alt="Ici" />

CSS

@-moz-keyframes pendante {
    0%, 100% : {
        -moz-transform : rotate(-5deg);
    }
    50% {
        -moz-transform : rotate(5deg);
    }
}

@-webkit-keyframes pendante {
    0%, 10%, 100% {
        -webkit-transform : rotate(-5deg);
    }
    50% {
        -webkit-transform : rotate(5deg);
    }
}

@-o-keyframes pendante {
    0%, 100% : {
        -o-transform : rotate(-5deg);
    }
    50% {
        -o-transform : rotate(5deg);
    }
}

div.pendante {
    height : 200px;
    position : relative;
    margin-bottom : 50px;
    left : 50px;
}

.fil {
    position : absolute;
    left : 64px;
    height : 100%;
    width : 2px;
    background-color : gray;
}

img.pendante {
    position : absolute;
    bottom : -32px;
    -moz-transform : rotate(-5deg);
    /*-moz-transform : rotateY(150deg);*/
    -moz-animation : pendante 10s ease infinite;
    -webkit-transform : rotate(-5deg);
    /* -webkit-transform : rotateY(150deg); */
    -webkit-animation : pendante 10s ease infinite;
    -o-transform : rotate(-5deg);
    /* -o-transform : rotateY(150deg); */
    -o-animation : pendante 10s ease infinite;
    perspective : 500;
}

@-moz-keyframes star {
    0%, 100% {
        box-shadow : 0 0 1px white;
    }
    50% {
        box-shadow : 0 0 10px white;
    }
}

@-webkit-keyframes star {
    0%, 100% {
        box-shadow : 0 0 1px white;
    }
    50% {
        box-shadow : 0 0 10px white;
    }
}

#sky {
    height : 50px;
    background-color : #336;
    position : relative;
}

.star {
    background-color : white;
    border-radius : 2.5px;
    -moz-animation : star infinite;
    -webkit-animation : star infinite;
    position : absolute;
}

@-moz-keyframes shaker {
    0%, 10%, 100% {
        -moz-transform : rotate(0deg);
    }
    1%, 5%, 9% {
        -moz-transform : rotate(-5deg);
    }
    3%, 7% {
        -moz-transform : rotate(5deg);
    }
}

@-webkit-keyframes shaker {
    0%, 10%, 100% {
        -webkit-transform : rotate(0deg);
    }
    1%, 5%, 9%...