Skip to content

Instantly share code, notes, and snippets.

@idrakimuhamad
Created February 27, 2012 15:45
Show Gist options
  • Save idrakimuhamad/1924788 to your computer and use it in GitHub Desktop.
Save idrakimuhamad/1924788 to your computer and use it in GitHub Desktop.
Fade in animation from Path Web App. Save for revision.
/**
* Fade in animation from Path Web App. Save for revision.
*/
.m {
width: 500px;
height: 350px;
background: #f0f0f0;
margin: 0 auto;
border: 1px solid #ddd;
animation: fade-moment-in .5s ease-out;
position: relative;
}
@-webkit-keyframes fade-moment-in{
0%{
opacity:.0;
-webkit-transform:scale(0.9) translate3d(0,-40px,0);
}
100%{
opacity:1.0;
-webkit-transform:scale(1) translate3d(0,0,0);
}
}
@-moz-keyframes fade-moment-in{
0%{
opacity:.0;
-moz-transform:scale(0.9) translate3d(0,-40px,0);
}
100%{
opacity:1.0;
-moz-transform:scale(1) translate3d(0,0,0);
}
}
<!-- content to be placed inside <body>…</body> -->
<div class="m">
<h1>Welcome</h1>
</div>
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment