This question already has answers here:
CSS animation delay in repeating
(12 answers)
Closed 24 days ago.
Why does animation-delay not works properly in between each animation? For example between each animation iteration I want to have a little pause. How can I get around this issue?
.fa-shake {
animation-name: fa-shake;
animation-duration: 1s;
animation-timing-function: linear;
animation-direction: normal;
animation-delay: 1s;
animation-iteration-count: infinite;
width:150px;
height: auto;
}
#keyframes fa-shake {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
20%,
40%,
60%,
80% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
}
<img class="fa-shake" src="https://parspng.com/wp-content/uploads/2022/03/telephonepng.parspng.com-2-600x643.png">
animation-delay specifies the delay before the animation starts and NOT the delay in between iterations.And there is solution provided in this post on this link.
Related
I am a bit confused on how keyframes work exactly in this demo. Whats confusing me is that 0% and 100% are not defined but 25% and 75% are. But at 0% the 25% keyframe is active. I thought it wouldn't be active until 25% through the animation until it hits the 75% keyframe. Also when does the 75% keyframe stop 100%? If you could explain exactly what is happening it would be appreciated. I hope this question is clear. Thanks.
#-webkit-keyframes pulse {
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes pulse {
25% {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
.pulse {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
width: 50px;
height: 50px;
background-color: blue;
}
.pulse:hover {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
<div class="pulse">
</div>
hi if you don't need animation to happen then add
#keyframes <animation name>
{
0%,25%
{
animation here
}
75%,100%
{
animation here
}
}
what happens here is animation don't start up-to 25%, from 25% to 75% animation plays and stops after 75% until it reaches 100%
Here's my problem, I have my code here, and it works. Only thing is, I can't seem to make it work when I take away .shake:hover,.
I want the image to shake continuously, regardless if it's being hover over or not. In short, I want it to run by itself.
Here's the fiddle
CSS
body {
background-color:transparent;
}
img {
display: block;
height: 250px;
width: 250px;
}
#-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
HTML
<body>
<center>
<section class="content">
<h1></h1>
<br>
<br>
<img src="http://image.flaticon.com/teams/new/1-freepik.jpg" class="shake">
<h2 class="shake"></h2>
</section>
</center>
</body>
You need simply to remove :hover and .shake:focus, so it would look like that:
.shake {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Working fiddle: http://jsfiddle.net/fthLwct0/2
Replace
.shake:hover,
.shake:focus {
with
.shake {
Here is the fiddle :
https://jsfiddle.net/q245wpg3/1/
It would be interesting to hear which browsers you need to support. Since you are only accessing browsers which support the prefix -webkit-.
This code will work in the newest Chrome and Firefox browsers:
// Removed 'hover' and 'focus'
.shake {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
However it will not work in IE11.
If you want to support a wide variety of browser you will have no fun with animations.
So your options here are:
Look up if you can use your desired CSS at http://caniuse.com/
Use a prefixer in your workflow. You need a taskrunner like Gulp/Grunt to use a Autoprefixer: https://github.com/postcss/autoprefixer
Make use of a CSS-Library like Animate.css. Those guys will do the most work of worrying about browser supports (keep in mind that you need to look into the docs for browser support information): https://daneden.github.io/animate.css/
Hope this helps.
Regards,
Megajin
Replace the .shake:hover,.shake:focus with following css
.shake {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Is there a way to have two arrows "bouncing" in separate directions using CSS?
I have the following code on my site (domainmarket.io), which produces one bouncing arrow (which can be seen on the top left-hand corner), but I would like another arrow bouncing in another direction, but can't figure out how.
HTML
<div class="arrow bounce"></div>
<div class="topbarleft">
<a href="javascript:showhide('uniquename')">
<p><?php echo wp_kses_post( $ocin_topbar_text ); ?></p>
</a>
<div class="rightarrow bounceright"></div>
</div>
CSS
#-webkit-keyframes bounce{
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0);
}
40% {
transform: translateX(-30px);
}
60% {
transform: translateX(-15px);
}
}
#keyframes bounce{
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-ms-transform: translateX(-15px);
transform: translateX(-15px);
}
}
#-webkit-keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(30px)!important;
transform: translateX(30px)!important;
}
60% {
-webkit-transform: translateX(15px)!important;
transform: translateX(15px)!important;
}
}
#-moz-keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0);
}
40% {
transform: translateX(30px)!important;
}
60% {
transform: translateX(15px)!important;
}
}
#keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(30px) !important;
transform: translateX(30px)!important;
}
60% {
-ms-transform: translateX(15px)!important;
transform: translateX(15px)!important;
}
}
.arrow {
margin-top:0px;
width: 24px;
height: 24px;
float: left;
margin-right: 10px;
background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrow-1.png');
background-repeat: no-repeat;
}
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.bounceright {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.rightarrow.bounceright {
background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrowright.png');
background-repeat: no-repeat;
float: left;
width: 24px;
height: 24px;
display: inline-block;
}
As you can see in my CSS code, I've tried to change the #keyframes to bounceright to see if that would work, but it hasn't.
Got it figured out!
In the CSS file
.bounceright {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
SHOULD BE
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
Somehow, you adding !important to the bounceright keyframes disabled them. Remove it and it works.
Declarations in #keyframes that are marked with !important are ignored. See here: https://developer.mozilla.org/en/docs/Web/CSS/#keyframes#!important_in_a_keyframe
So here is the end result:
#keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(30px);
transform: translateX(30px)
}
60% {
-ms-transform: translateX(15px);
transform: translateX(15px);
}
}
Edit: also, as the author of the question explained, change "bounce" with "bounceright" in the .bounceright CSS rule:
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
However, I found a much simpler solution to all of this: instead of using another arrow and another class, just use the same. So instead of:
<div class="rightarrow bounceright"></div>
use
<div class="reverse"><div class="arrow bounce"></div></div>
with the CSS rule:
.reverse {
transform: rotate(180deg);
display:inline-block;
}
This way there is no duplication of the same code just to reverse the direction of the arrow.
I want pendulum effect with pure CSS but it's not smooth.
Here is what I want, but with pure CSS. http://www.webdevdoor.com/demos/html5-pendulum-demo/
But I prefer more looked like natural speed variation according to it's position.
Fiddle
.bellImg {
height: 20px;
width: 20px;
position: absolute;
right: 10px;
top: 18px;
-webkit-animation-name: rotate;
animation-delay: 3s;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
-webkit-transform-origin: 50% 0%;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
10% {
-webkit-transform: rotate(10deg);
}
20% {
-webkit-transform: rotate(20deg);
}
30% {
-webkit-transform: rotate(10deg);
}
40% {
-webkit-transform: rotate(5deg);
}
50% {
-webkit-transform: rotate(0deg);
}
60% {
-webkit-transform: rotate(-5deg);
}
70% {
-webkit-transform: rotate(-10deg);
}
80% {
-webkit-transform: rotate(-20deg);
}
90% {
-webkit-transform: rotate(-10deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<img class="bellImg" src="img/bell.png">
There are a few problems in your code:
The animation-timing-function is specified as ease-in-out. This indicates that the animation starts and end slowly but has more speed in between. For a graceful and equal move, this should be set to linear.
This is what MDN says about ease-in-out timing function:
This keyword represents the timing function cubic-bezier(0.42, 0.0, 0.58, 1.0). With this timing function, the animation starts slowly, accelerates then slows down when approaching its final state. At the beginning, it behaves similarly to the ease-in function; at the end, it is similar to the ease-out function.
There is no value called linear for animation-direction.
The splits are not equal. That is, for some 10% gap it is rotating by 10 degree whereas for others it is rotating only by 5 degree. Make the splits equal.
The below snippet with all corrections done produces a smooth animation.
.bellImg {
height: 20px;
width: 20px;
position: absolute;
right: 10px;
top: 18px;
-webkit-animation-name: rotate;
animation-delay: 3s;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-transform-origin: 50% 0%;
-webkit-animation-timing-function: linear; /* or make your custom easing */
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<img class="bellImg" src="https://cdn1.iconfinder.com/data/icons/freeline/32/bell_sound_notification_remind_reminder_ring_ringing_schedule-48.png">
Setting the animation's speed to depend on the position (that is, slow down as it reaches the extremes and quicken up in the middle) is impossible to achieve with pure CSS (even if we add extra elements).
For setting the animation's speed depending on its position, one option would be to do the following:
Add the image into a container element. Animate it such that it rotates from 20deg to -40deg.
Make the animation on the parent start earlier than the child by 1/3rd of the animation duration of both. That is, reduce the delay on parent by 0.66s. This is done to get the parent to offset initial rotation on the child. The difference is 1/3rd of animation duration because it is the time taken by parent to come to 0deg.
Change the keyframes for the image's animation such that the rotation is from -20deg to 40deg.
Set the animation-direction as alternate for both so that they go in forward direction for first iteration, in reverse for the next and so on.
Set the animation-timing-function as ease-in-out so that it slows down as it approaches the extremes. The effect is more apparent when the animation duration is increased.
.container {
position: absolute;
height: 20px;
width: 20px;
/* right: 10px; commented for demo */
top: 18px;
transform: rotate(20deg);
animation-name: rotate-container;
animation-delay: 2.33s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: 50% 0%;
animation-timing-function: ease-in-out;
}
.bellImg {
height: 100%;
width: 100%;
transform: rotate(-20deg);
animation-name: rotate;
animation-delay: 3s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: 50% 0%;
animation-timing-function: ease-in-out;
}
#keyframes rotate {
0% {
transform: rotate(-20deg);
}
100% {
transform: rotate(40deg);
}
}
#keyframes rotate-container {
0% {
transform: rotate(20deg);
}
100% {
transform: rotate(-40deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
<img class="bellImg" src="https://cdn1.iconfinder.com/data/icons/freeline/32/bell_sound_notification_remind_reminder_ring_ringing_schedule-48.png">
</div>
Prefix-free library is used in the snippet only to avoid browser prefixes.
The equation involved in the movement of a pendulum is a sinusoidal movement.
You can get this movement with the following animation
.base {
height: 600px;
width: 10px;
position: absolute;
animation: base 10s infinite linear;
background-color: lightgray;
transform: translateX(588px);
}
#keyframes base {
from {transform: translateX(77px);}
to {transform: translateX(760px);}
}
.element {
height: 10px;
width: 10px;
background-color: green;
border-radius: 100%;
animation: element 10s infinite;
transform: translateY(553px);
}
#keyframes element {
from {transform: translateY(294px); animation-timing-function: ease-out;}
25% {transform: translateY(36px); animation-timing-function: ease-in;}
50% {transform: translateY(294px); animation-timing-function: ease-out;}
75% {transform: translateY(553px); animation-timing-function: ease-in;}
to {transform: translateY(294px);}
}
.ref {
width: 800px;
height: 600px;
background-image: url(http://i.stack.imgur.com/Fx4bR.png);
background-size: cover;
}
<div class="base">
<div class="element">
</div>
</div>
<div class="ref"></div>
I had to use some hand-worked values to adjust for the background-image, but the key idea is in the timing functions.
If the preset function is not what you want, you can set a cubic bezier and adjust it as you want.
.base {
height: 600px;
width: 10px;
position: absolute;
animation: base 10s infinite linear;
background-color: lightgray;
transform: translateX(588px);
}
#keyframes base {
from {transform: translateX(77px);}
to {transform: translateX(760px);}
}
.element {
height: 10px;
width: 10px;
background-color: green;
border-radius: 100%;
animation: element 10s infinite;
transform: translateY(553px);
}
#keyframes element {
from {transform: translateY(294px);
animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
25% {transform: translateY(36px);
animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
50% {transform: translateY(294px);
animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
75% {transform: translateY(553px);
animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
to {transform: translateY(294px);}
}
.ref {
width: 800px;
height: 600px;
background-image: url(http://i.stack.imgur.com/Fx4bR.png);
background-size: cover;
}
<div class="base">
<div class="element">
</div>
</div>
<div class="ref"></div>
This is the image used for reference
And this would be the 2 timing functions applied to a pendulum
.test {
height: 400px;
width: 10px;
background-color: lightgreen;
display: inline-block;
margin: 10px 100px;
transform-origin: center top;
}
.anim1 {
animation: oscil1 6s infinite;
}
.anim2 {
animation: oscil2 6s infinite;
}
#keyframes oscil1 {
from {transform: rotate(0deg); animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
25% {transform: rotate(20deg); animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
50% {transform: rotate(0deg); animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
75% {transform: rotate(-20deg); animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
to {transform: rotate(0deg);}
}
#keyframes oscil2 {
from {transform: rotate(0deg); animation-timing-function: ease-out;}
25% {transform: rotate(20deg); animation-timing-function: ease-in;}
50% {transform: rotate(0deg); animation-timing-function: ease-out;}
75% {transform: rotate(-20deg); animation-timing-function: ease-in;}
to {transform: rotate(0deg);}
}
<div class="test anim1"></div>
<div class="test anim2"></div>
I haven't used CSS here, but since (it seems like) you just want to avoid libraries, I've implemented it in native JS. It uses the Math.sin() method to tween the values smoothly. As you can see, the effect is very smooth and requires very little code.
var img = document.querySelector( '.bellImg' ),
start = 0;
function sine(){
img.style.transform = "rotate(" + 20 * Math.sin( start ) + "deg)";
start += 0.05;
setTimeout(sine, 1000/30)
}
setTimeout( sine, 3000 );
.bellImg {
height: 20px;
width: 20px;
position: absolute;
left: 10px;
top: 18px;
}
<img class="bellImg" src="https://cdn1.iconfinder.com/data/icons/freeline/32/bell_sound_notification_remind_reminder_ring_ringing_schedule-48.png">
Hope this helps!
I am trying to chain together 2 CSS animations, see pen: http://codepen.io/jdesilvio/pen/pjwvyO
I have followed the syntax provided in other answers to similar questions, but they don't seem to work correctly:
animation-name: falling, laydown;
animation-duration: 2000ms, 1000ms;
animation-timing-function: ease-in, ease-out;
animation-iteration-count: 1, 1;
It is playing the second animation, then the first and finally the second one again. How can I get it to play the first, then second?
Here is the full code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
#keyframes falling {
0% {
transform: translate3d(0, -400px, 0);
}
100% {
transform:
translate3d(0, 40%, 0)
rotateX(30deg)
rotateY(0deg)
rotateZ(60deg);
}
}
#keyframes laydown {
0% {
transform:
translate3d(0, 40%, 0)
rotateX(30deg)
rotateY(0deg)
rotateZ(60deg);
}
100% {
transform:
translate3d(0, 40%, 0)
rotateX(70deg)
rotateY(0deg)
rotateZ(80deg);
}
}
#falling-card-parent {
height: 150px;
width: 100px;
margin: auto;
perspective: 1000px;
}
#falling-card {
height: 150px;
width: 100px;
background-color: black;
margin: auto;
transform:
translate3d(0, 40%, 0)
rotateX(70deg)
rotateY(0deg)
rotateZ(80deg);
animation-name:
falling, laydown;
animation-duration:
2000ms, 1000ms;
animation-timing-function:
ease-in, ease-out;
animation-iteration-count:
1, 1;
}
</style>
<html>
<body>
<div id="falling-card-parent">
<div id="falling-card"></div>
</div>
</body>
</html>
The problem is actually not with the order of the animations but because of how multiple animations on pme element works. When multiple animations are added on an element, they start at the same time by default.
Because of this, both the laydown and falling animations start at the same time but the laydown animation actually completes within 1000ms from the start but the first animation (which is falling) doesn't complete till 2000ms.
The W3C spec about animations also say the following about multiple animations accessing the same property during animation:
If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins.
In the code provided in question, both animations are trying to modify the transform property and the second animation is the closest to the end. So while the second animation is still running (which is, for the first 1000ms) the transform changes are applied as specified in the second animation. During this time the first animation is still running but it has no effect because its values are overwritten. In the 2nd 1000ms (when the second animation has already completed but 1st is still executing), the transforms are applied as directed by the first animation. This is why it looks as if the second animation is running before the first animation and then the first.
To fix this problem, the execution of the second animation should be put on hold (or delayed) until the time the first animation is complete. This can be done by adding a animation-delay (that is equal to the animation-duration of the first animation) for the second animation.
animation-name: falling, laydown;
animation-duration: 2000ms, 1000ms;
animation-delay: 0ms, 2000ms; /* add this */
animation-timing-function: ease-in, ease-out;
animation-iteration-count: 1, 1;
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
#keyframes falling {
0% {
transform: translate3d(0, -400px, 0);
}
100% {
transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg);
}
}
#keyframes laydown {
0% {
transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg);
}
100% {
transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg);
}
}
#falling-card-parent {
height: 150px;
width: 100px;
margin: auto;
perspective: 1000px;
}
#falling-card {
height: 150px;
width: 100px;
background-color: black;
margin: auto;
transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg);
animation-name: falling, laydown;
animation-duration: 2000ms, 1000ms;
animation-delay: 0ms, 2000ms;
animation-timing-function: ease-in, ease-out;
animation-iteration-count: 1, 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="falling-card-parent">
<div id="falling-card"></div>
</div>
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
#keyframes falling {
0% {
transform: translate3d(0, -400px, 0);
}
100% {
transform:
translate3d(0, 40%, 0)
rotateX(30deg)
rotateY(0deg)
rotateZ(60deg);
}
}
#keyframes laydown {
0% {
transform:
translate3d(0, 40%, 0)
rotateX(30deg)
rotateY(0deg)
rotateZ(60deg);
}
100% {
transform:
translate3d(0, 40%, 0)
rotateX(70deg)
rotateY(0deg)
rotateZ(80deg);
}
}
#falling-card-parent {
height: 150px;
width: 100px;
margin: auto;
perspective: 1000px;
}
#falling-card {
height: 150px;
width: 100px;
background-color: black;
margin: auto;
transform:
translate3d(0, 40%, 0)
rotateX(70deg)
rotateY(0deg)
rotateZ(80deg);
animation-name:
laydown, falling;
animation-duration:
2000ms, 1000ms;
animation-timing-function:
ease-in, ease-out;
animation-iteration-count:
1, 1;
}
<div id="falling-card-parent">
<div id="falling-card"></div>
</div>
Just reverse this:
animation-name:
falling, laydown;
to
animation-name:
laydown, falling;
Here: http://jsfiddle.net/hfxopjjy/