JSFiddle - React, Tailwind, and code Playground
HTML
<img src="http://cdn.osxdaily.com/wp-content/uploads/2010/10/giant-apple-logo-bw.png" 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 20 normal;
-moz-animation: FlipNotesLogoSlideIn 5s ease 20 normal;
-o-animation: FlipNotesLogoSlideIn 5s ease 20 normal;
-webkit-animation: FlipNotesLogoSlideIn 5s ease 20 normal;
margin-top: 150px;
}
JavaScript
$('img').animate({ marginTop: '250px', opacity: 0.5 }, 1000);