JSFiddle - React, Tailwind, and code Playground

by kevinPHPkevin

HTML

<img src="http://cdn.dice.com/wp-content/uploads/2011/05/apple-logo.jpg" width="100px" class="animate" />

CSS

.animate {
        position: relative;
        display: block;
        /* Position this element behind the header so it looks like
        it's fading into view from the very top.
    */
        margin: auto;

        animation: FlipNotesLogoSlideIn 5s ease 0 normal;
        -moz-animation: FlipNotesLogoSlideIn 5s ease 0 normal;
        -o-animation: FlipNotesLogoSlideIn 5s ease 0 normal;
        -webkit-animation: FlipNotesLogoSlideIn 5s ease 0 normal;

        margin-top: 150px;
    }

JavaScript

$('img').animate({ marginTop: '250px', opacity: 0.5 }, 1000);