Skip to content

Instantly share code, notes, and snippets.

@atsjj atsjj/code.html
Created May 2, 2013

Embed
What would you like to do?
Fade Style
<button id="btn">Press</button>
<div id="box"></div>
#box {
width: 500px;
height: 30px;background: red;
display: none;
-webkit-animation-duration: 2s;
-webkit-animation-delay: .2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0);
}
50% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
}
$('#btn').click(function(){
$('#box').toggle().toggleClass("fadeInUp");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.