I have chained two animations in a loop. After a lot of tweaking the images scroll in and out without overlapping. The problem is once the animations have finished there is a 3-4 second delay before they restart. I have not set any delays in my code so think there's a problem with the keyframes but when I play around with the values the images start to overlap.
I have made a pen here. Only chrome keyframes at the moment, the animation staggers in codepen but displays fine in chrome :
http://codepen.io/Nullbreaker/pen/gnkbq
<div class="rightleftloop">
<img src="http://myshoedream.com/dzinehub/Shoefever/LL10173A-BLACK-4.jpg" class="imgformat1" alt="slide" />
</div>
<div class="rightleftloop2">
<img src="http://myshoedream.com/dzinehub/Shoefever/LL10173BJ-IVORY-4.jpg" class="imgformat1" alt="slide" />
</div>
.rightleftloop {
position: absolute;
-webkit-animation:rightleftloop;
-webkit-animation-duration: 8.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
-moz-animation:rightleftloop;
-moz-animation-duration: 3.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in 0.3s;
-moz-animation-fill-mode: both;
animation:rightleftloop;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in 0.3s;
animation-fill-mode: both;
}
.rightleftloop2 {
position: absolute;
-webkit-animation:rightleftloop2;
-webkit-animation-duration: 8.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
-moz-animation:rightleftloop;
-moz-animation-duration: 3.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in 0.3s;
-moz-animation-fill-mode: both;
animation:rightleftloop;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in 0.3s;
animation-fill-mode: both;
}
#-webkit-keyframes rightleftloop {
0% {right:0%;-webkit-transform: translateX(-2000px);}
10% {right:20%;}
20% {right:20%;}
30% {right:20%;-webkit-transform: translateX(-10px);}
40% {right:20%;-webkit-transform: translateX(-10px);}
60% {right:20%;-webkit-transform: translateX(-2000px);}
100% {right:100%;}
}
#-webkit-keyframes rightleftloop2 {
60% {right:0%;-webkit-transform: translateX(-2000px);}
61% {right:20%;}
63% {right:20%;}
64% {right:20%;}
65% {right:20%;}
65% {right:20%;}
66% {right:20%;}
67% {right:20%;}
68% {right:20%;-webkit-transform: translateX(-2000px);}
69% {right:20%;-webkit-transform: translateX(-1000px);}
}
Your animation keyframes were not right. I've simplified your CSS as well. You can paste this css in your pen and see the results for yourself.
body {
background:#ffffff;
font-family:'Economica', Arial, sans-serif;
font-size:30px;
font-style: normal;
font-weight: 400;
color:#000000;
}
/* as properties for both required images are the same, we are using them as one group */
.rightleftloop, .rightleftloop2 {
position: absolute;
-webkit-animation:rightleftloop;
-webkit-animation-duration: 8.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
}
/* the second image animation will start with a delay of the half time as the original animation time as we set our images out of the frame from 50%-100% in the keyframes - this animation delay only comes up once before the start of the original animation */
.rightleftloop2 {
-webkit-animation-delay: 4250ms;
}
/* one animation with pre-defined delay from 50%-100% of the time as content hidden so what ever animation we need will be done between 0%-50% */
#-webkit-keyframes rightleftloop {
0% {
-webkit-transform: translateX(-500px);
}
15% {
-webkit-transform: translateX(20px);
}
35% {
-webkit-transform: translateX(20px);
}
50% {
-webkit-transform: translateX(-500px);
}
100% {
-webkit-transform: translateX(-500px);
}
}
Related
This may be a dumb question (haven't done JS/HTML in a bit). I want this animation to be smooth all the way through but for some reason, it is stopping in the middle for a short period of time then resuming. Adding more steps to try and smooth the transition only seems to make is pause for longer. Is there a fix for this?
#under {
color: black;
font-size: 28px;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
#keyframes example {
0% {
transform: translateX(-330px);
}
50% {
transform: scaleX(3);
}
100% {
transform: translateX(330px);
}
}
<body>
<div id="under">
<p> - </p>
</div>
</body>
To keep things moving evenly, you need to define your scaleX values at 0% and 100%. In addition, I changed your timing function from ease-in-out to linear. At 50%, translateX is already at 0 since you defined the start and end values. For consistency, I added the 0 value at 50%.
#under {
background-color: #000;
color: white;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
width: 100px;
height: 50px;
}
#keyframes example {
0% {
transform: scaleX(1) translateX(-330px);
}
50% {
transform: scaleX(3) translateX(0);
}
100% {
transform: scaleX(1) translateX(330px);
}
}
<div id="under"></div>
Is it possible to "restart" a keyframe animation after it's stops with the same animation delay time again?
#keyframes scale {
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.animated-btn {
animation: scale ease-in 1;
animation-fill-mode:forwards;
animation-duration: .6s;
animation-delay: 11.8s;
}
<a href="" class="btn btn__arrow animated-btn">
Aniamted Button
</a>
Unfortunately it's not possible to set a delay before each animation, but you can set a delay inside the animation. Just let the animation do nothing for a while until you reach a certain percentage.
Here's the updated code.
#keyFrames scale {
90% {
transform: scale(1)
}
95% {
transform: scale(1.3)
}
100% {
transform: scale(1);
}
}
.animated-btn {
display: inline-block;
animation: scale ease-in 1;
animation-fill-mode: forwards;
animation-duration: 12.4s;
animation-delay: 0s;
animation-iteration-count: infinite;
/* Or the shorthand:
animation: scale 1.4s 0s infinite ease-in forwards;
*/
}
Yes you just need to use the animation-iteration-count property.
You can set its value to infinite.
I have an element with a background image that simply moves up and down using css transitions. At some points in the animation the image goes slightly blurry. The graphic is more pixel art so it's really noticeable.
Is there any way I can have a smooth animation without the edges going blurry?
Additionally, is there any way to make Firefox animations smoother?
UPDATE (ignore code below): http://codepen.io/anon/pen/gpMvzb
#elem {
width: 152px;
height: 68px;
-webkit-animation-name: Floating;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-webkit-transform: translateZ(0);
}
#-webkit-keyframes Floating {
from {-webkit-transform:translateY(0); }
50% {-webkit-transform:translateY(2px);}
to {-webkit-transform: translateY(0);}
}
#-moz-keyframes Floating {
from {-moz-transform:translateY(0);}
50% {-moz-transform:translateY(2px);}
to {-moz-transform: translateY(0);}
}
I'm trying to animate an image so that it keeps spinning infinitely, because it shall represent a loading process. The image is this one if you cannot imagine what I mean:
The problem is that after the animation has run it always stops for a moment. What can I do about it? Is there any way to make the transition fluent?
Here's the jsfiddle, where I replaced the image with a div
And the CSS seperately:
.load { /* load is a little div in this case */
height: 20px;
width: 20px;
border: 2px solid black;
animation-name: myAni;
animation-timing: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0;
-webkit-animation-name: myAni;
-webkit-animation-timing: linear;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
}
#keyframes myAni {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes myAni {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
The problem is that animation-timing should be animation-timing-function, otherwise you get the default ease that causes the slow start and end. It was marked red in your JSFiddle.
I have multiple divs with animations, created in CSS, on my page. When the last div with animation is finished animating I wish to have the whole sequence to start over. My animations all have different delay times, and animations. I've tried the "animation: infinite" but what that achieves is the each individual animation will run again immediately after the animation has finshed. I need it start from the beginning after all of the animations have completed.
Anyone know how to achieve this?
Sample CSS
.openDiv {
width: 0px;
height: 513px;
background-image: url("CLS-circle-Ring-faded.png");
animation-name: grow;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-delay: 2s;
transition-delay: 10s;
-webkit-animation-name: grow;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 2s;
-webkit-transition-delay: 10s;
}
#-webkit-keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
} /* Standard syntax */#keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
}