We Keep Coding

Second css animation is added but not causing effect

I have a menu button and a menu, there is 1 known bug:
Bug: One of the events is on mouseleave of the menu box and it should add a class dropDownMenuPulsate which is applied but does not work, I am forced to use !important in css animation declaration, why?
To reproduce this bug: click the menu button, place the mouse over the menu and then out(don't go back over), wait... in 2 seconds it applies animation if !important is used and 4 seconds later menu closes as expected.
var menuAutoHideTimeoutId = '';
var menuAutoWarningTimeoutId = '';
// dropdown menu button click
$("#dropDownMenuBtn").on("click", function(){
event.stopPropagation();
if($("#dropDownMenuWrap").css("opacity") == 0){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapHideAnimation').addClass('dropDownMenuWrapShowAnimation');
}else{
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
}
}
});
$(".dropDownMenuLinkWrap").on("click", function(){
console.log('page render');
// avoid menu hide to fire when click click outside menu wrap
event.stopPropagation();
})
// dropdown menu hide on click outside menu wrap
$(document).on("click", function(){
if($("#dropDownMenuBtn:hover").length == 0){
if($("#dropDownMenuWrap").css("opacity") == 1){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
}
}
});
$("#dropDownMenuWrap").on("mouseleave", function(){
// add class showing pulsating effect as warning of closing soon
menuAutoWarningTimeoutId = setTimeout(function(){
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").addClass('dropDownMenuPulsate');
}
}, 2000);
menuAutoHideTimeoutId = setTimeout(function(){
// add closing animation and remove others
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation dropDownMenuPulsate').addClass('dropDownMenuWrapHideAnimation');
}
}, 6000);
})
//mouse re enter cancel mouseout event
$("#dropDownMenuWrap").on("mouseenter", function(){
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
}
})
.dropDownMenuPulsate{
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
animation: pulsateAnimation .2s linear infinite !important;
}
#keyframes pulsateAnimation {
0% { transform: rotate(10deg); }
33% { transform: rotate(0deg); }
66% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
#dropDownMenuBtn {
cursor: pointer;
position: fixed;
top: 3px;
right: 20px;
font-size: xx-large;
color: #f997bb;
}
#dropDownMenuBtn:hover {
color: lightgrey;
}
.dropDownMenuWrapInitial{
position: fixed;
z-index: 99;
top: 60px;
background: white;
border: 1px solid lightgrey;
width: 200px;
padding: 10px;
border-radius: 5px;
pointer-events :none;
right:-300px;
opacity: 0;
}
.dropDownMenuWrapShowAnimation{
pointer-events :auto;
opacity:1;
right:10px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuShowAnimation;
-webkit-animation: .2s ease 1 linkMenuShowAnimation;
}
#-webkit-keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.dropDownMenuWrapHideAnimation{
pointer-events :none;
opacity:0;
right:-300px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuHideAnimation;
-webkit-animation: .2s ease 1 linkMenuHideAnimation;
}
#-webkit-keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
#keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropDownMenuBtn">
Menu button
</div>
<div id="dropDownMenuWrap" class="dropDownMenuWrapInitial">
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 1</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 2</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 3</p>
</div>
</div>
</div>

This happens because the element have three classes among which 2 of them contains animations. In such cases, the order from the css file will be followed. Since you put
dropDownMenuPulsate first and dropDownMenuWrapShowAnimation second in css file, the animation of dropDownMenuWrapShowAnimation will override the animation of dropDownMenuPulsate (you can see it in element inspector).
The fix
Move dropDownMenuPulsate block below dropDownMenuWrapShowAnimation block in css file, as you can see here.
var menuAutoHideTimeoutId = '';
var menuAutoWarningTimeoutId = '';
// dropdown menu button click
$("#dropDownMenuBtn").on("click", function(){
event.stopPropagation();
if($("#dropDownMenuWrap").css("opacity") == 0){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapHideAnimation').addClass('dropDownMenuWrapShowAnimation');
}else{
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
}
}
});
$(".dropDownMenuLinkWrap").on("click", function(){
console.log('page render');
// avoid menu hide to fire when click click outside menu wrap
event.stopPropagation();
})
// dropdown menu hide on click outside menu wrap
$(document).on("click", function(){
if($("#dropDownMenuBtn:hover").length == 0){
if($("#dropDownMenuWrap").css("opacity") == 1){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
}
}
});
$("#dropDownMenuWrap").on("mouseleave", function(){
// add class showing pulsating effect as warning of closing soon
menuAutoWarningTimeoutId = setTimeout(function(){
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").addClass('dropDownMenuPulsate');
}
}, 2000);
menuAutoHideTimeoutId = setTimeout(function(){
// add closing animation and remove others
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation dropDownMenuPulsate').addClass('dropDownMenuWrapHideAnimation');
}
}, 6000);
})
//mouse re enter cancel mouseout event
$("#dropDownMenuWrap").on("mouseenter", function(){
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
}
})
#keyframes pulsateAnimation {
0% { transform: rotate(10deg); }
33% { transform: rotate(0deg); }
66% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
#dropDownMenuBtn {
cursor: pointer;
position: fixed;
top: 3px;
right: 20px;
font-size: xx-large;
color: #f997bb;
}
#dropDownMenuBtn:hover {
color: lightgrey;
}
.dropDownMenuWrapInitial{
position: fixed;
z-index: 99;
top: 60px;
background: white;
border: 1px solid lightgrey;
width: 200px;
padding: 10px;
border-radius: 5px;
pointer-events :none;
right:-300px;
opacity: 0;
}
.dropDownMenuWrapShowAnimation{
pointer-events :auto;
opacity:1;
right:10px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuShowAnimation;
-webkit-animation: .2s ease 1 linkMenuShowAnimation;
}
.dropDownMenuPulsate{
/*ANIMATION Works without !important
¯\_(ツ)_/¯
*/
animation: pulsateAnimation .2s linear infinite;
}
#-webkit-keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.dropDownMenuWrapHideAnimation{
pointer-events :none;
opacity:0;
right:-300px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuHideAnimation;
-webkit-animation: .2s ease 1 linkMenuHideAnimation;
}
#-webkit-keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
#keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropDownMenuBtn">
Menu button
</div>
<div id="dropDownMenuWrap" class="dropDownMenuWrapInitial">
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 1</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 2</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 3</p>
</div>
</div>
</div>
Reference
Just a personal opinion, are you sure you want to show such an animation in a page?

When .dropDownMenuPulsate is added to #dropDownMenuWrap, that element already has .dropDownMenuWrapShowAnimation.
Both classes have an "animation" property, and since .dropDownMenuPulsate is declared first, .dropDownMenuWrapShowAnimation is overriding it.
You could move .dropDownMenuPulsate declaration to the bottom, or make it more specific:
.dropDownMenuWrapShowAnimation.dropDownMenuPulsate {
...
}

How to make preload animation disappear in 3s in Javascript

I have this preload animation that I want to incorporate into my website. All I want to do is play the animation for 3 seconds upon the page loading and then make it fade out. I've already successfully made it fade out by assigning transition property to CSS. All I need is the piece of code that delays it for 3s. I know it's something to do with the setTimeout() method but I think I'm not using it right.
This is what I've got so far:
<div class="spinner-wrapper" id="fds">
<div class="spinner"></div>
</div>
<script>
var preloader = document.getElementById("fds");
function fadeOut() {
preloader.style.opacity = "0.0";
setTimeout(fadeOut(), 5000);
}
</script>
I know the CSS is somewhat irrelevant but anyway, here it is:
.spinner-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ff6347;
z-index: 999999;
transition: 2s;
}
.spinner {
width: 40px;
height: 40px;
background-color: #333;
position: absolute;
top: 48%;
left: 48%;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}

All I need is the piece of code that delays it for 3s
Set animation-delay to 3s at CSS

Smoothness animation between two states

Ok folks, I really need some help here, it's blowing my mind...
Please take a look at the following example:
https://jsfiddle.net/t0Lahyjy/
HTML:
<div id="exmpl"></div>
<button id="btn">Try it</button>
CSS:
#exmpl {
margin: 100px auto 0 auto;
height: 100px;
width: 10px;
background: #000;
-webkit-animation: anim 3s infinite linear;
animation: anim 3s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
#-webkit-keyframes anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#btn {
margin: 100px auto 0 auto;
display:block;
}
.animationIsOff {
}
JS:
document.getElementById("btn").addEventListener("click", function(){
document.getElementById("btn").className += " animationIsOff";
});
Now look, what I want is... to get the smooth animation from the rotation state of default to the transform: rotate(90deg); when #btn clicked. I wanna do it with adding a new class, say animationIsOff, but there's no smoothness between this two states. IF there's no way to accomplish this smoothness with CSS(by only adding a class with JS), perhaps there's a way to do it with help of JS?
I hope I'm pretty clear to you, otherwise please do ask... I will describe it as I can further.

How to play different css animations one after another?

I'm trying to play different css animations one after another but I can't figure out how to.
Basically what I'm trying to do is play one Animation, have it on screen for 15 seconds, then play the next one, show it for 15 seconds and on to the next one and when the last one has been played, it should start again from the top.
Here's an example of the first one it should play, show for 15 seconds and then move on to the next one and do the same.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
</style>
<img id="animated-example" class="animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
And then run another one, show it for 15 seconds and move on.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
</style>
<img id="animated-example" class="animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

The only way to achieve that in pure CSS is to run all the animations at the same time and do some calculations:
the length of each animation should be the same and equal to the total length of desired animations (meaning if you want two 15-second animations, the CSS animations should be set to length of 30 seconds, no delays)
to control the start/end point of each animation, you need to modify the percentages accordingly - in the above case, it means that the first animation ends at 50% and that's when the second animation starts. Also, all in-between values need to be interpolated. It's easy for two animations, but you might need to use a calculator as the total number of animations increases. This is if we don't take the delays into account - the numbers change when we have a 15-second animation that will finish animation after 5 seconds, which now equals 33%, etc...
It will be more clear once you see it in action here:
.animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
animation-duration: 20s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
6% {
opacity: 1;
transform: translateX(30px);
}
8% {
transform: translateX(-10px);
}
10% {
transform: translateX(0);
}
40% {
opacity: 1;
transform: translateX(0);
}
42% {
opacity: 1;
transform: translateX(30px);
}
55% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
50% {
opacity: 0;
transform: translateY(-2000px);
}
56% {
opacity: 1;
transform: translateY(30px);
}
58% {
transform: translateY(-10px);
}
60% {
transform: translateY(0);
}
90% {
transform: translateY(0);
}
92% {
opacity: 1;
transform: translateY(30px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
<img class="animated-example animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
<img class="animated-example animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

Using animation-delay.
animation: a, b;
animation-duration: 2s, 2s;
animation-delay: 0s, 4s;
The animation b will start after 4s while animation a will start without any delay.

animation-delay would do exactly what you're looking for except for the fact that you want the animations to repeat after the last one has been completed; unfortunately there is (currently) no way to specify a delay between iterations of a looping animation.
You could, however, achieve what you're looking to do using a little bit of JavaScript, like the following. To add more animations, simply add their class names to the animations array at the start of the code.
var animations=["bounceInLeft","bounceInDown"],
count=animations.length,
classlist=document.querySelector("img").classList,
holder=document.createElement("div"),
style=window.getComputedStyle(holder),
delay=15,
current,wait,x;
holder.style.display="none";
document.body.appendChild(holder);
animate();
function animate(){
wait=0;
x=0;
while(x<count){
setTimeout(function(a){
classlist.remove(current);
classlist.add(a);
current=a;
},wait*1000,animations[x]);
holder.className=animations[x];
wait+=delay+parseInt(style.getPropertyValue("animation-duration"));
x++;
}
setTimeout(animate,wait*1000);
};
img{
animation-fill-mode:both;
height:200px;
width:300px;
}
.bounceInDown{
animation-duration:1s;
animation-name:bounceInDown;
}
.bounceInLeft{
animation-duration:2s;
animation-name:bounceInLeft;
}
#keyframes bounceInDown{
0%{
opacity:0;
transform:translateY(-2000px);
}
60%{
opacity:1;
transform:translateY(30px);
}
80%{
transform:translateY(-10px);
}
100%{
transform:translateY(0);
}
}
#keyframes bounceInLeft{
0%{
opacity:0;
transform:translateX(-2000px);
}
60%{
opacity:1;
transform:translateX(30px);
}
80%{
transform:translateX(-10px);
}
100%{
transform:translateX(0);
}
}
<img src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

I have managed to achieve something similar by adapting this concept by Noah Addy: http://digitalfio.github.io/Stagger.css/
You will need to work on the timings a bit to get the 15sec delay you want, but other than that it should be fairly straightforward.

Seamlessly transition back and forth with only one animation class?

I want to use one class to trigger an animation, and upon removal of that class redo that animation in reverse.
It's hard to visualize, so I've created a CodePen of where I'm at currently.
You'll notice that when .zoom is removed from #box, the #box just vanishes. It doesn't do the animation in reverse, which is ultimately the goal.
How can I seamlessly transition back and forth, with only one animation class? Normally I might use transitions, but you can't transition with transforms.

Try adding .zoomout class , css animations , utilizing .removeClass() , second class at .toggleClass()
window.onclick = function() {
if (!$("#box").is(".zoom")) {
$("#box").removeClass("zoomout")
.toggleClass("zoom");
} else {
$("#box").toggleClass("zoom zoomout");
}
};
#box {
width: 256px;
height: 256px;
background: black;
opacity: 0;
display: block;
transform: scale(1.15, 1.15);
margin: 16px 0px;
}
.zoom {
animation: zoom 500ms;
animation-fill-mode: both;
-moz-animation: zoom 500ms;
-moz-animation-fill-mode: both;
-webkit-animation: zoom 500ms;
-webkit-animation-fill-mode: both;
}
.zoomout {
animation: zoomout 500ms;
animation-fill-mode: both;
-moz-animation: zoomout 500ms;
-moz-animation-fill-mode: both;
-webkit-animation: zoomout 500ms;
-webkit-animation-fill-mode: both;
}
#keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#-moz-keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#-webkit-keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#-moz-keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#-webkit-keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
body {
margin: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
-moz-transform: translate(-50%, -60%);
-webkit-transform: translate(-50%, -60%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="box"></div>
Click the document to toggle the box.
codepen http://codepen.io/anon/pen/vOxxKE