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.
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>
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 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;
}
}
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);
}
}
Looking for some help on trying to achieve a certain animation. I'm trying to create a sequence similar to the infinite expanding rings seen here. (The example rings are contracting, I'm looking to go the other direction).
I've got a pretty good start thus far, I'm just not sure how to go about making it loop "smoothly", or if it's even possible with only CSS.
Any tips or ideas are greatly appreciated. Thanks!
Demo: http://codepen.io/fractionwhole/pen/HljuG
First, let's create 6 rings
<div id="r1" class="ring"></div>
<div id="r2" class="ring"></div>
<div id="r3" class="ring"></div>
<div id="r4" class="ring"></div>
<div id="r5" class="ring"></div>
<div id="r6" class="ring"></div>
And the CSS:
.ring {
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
background-color: transparent;
border: 15px gray solid;
-webkit-animation-name: ani;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 6s;
-webkit-animation-direction: reverse;
}
#-webkit-keyframes ani {
0% {-webkit-transform: scale(1); opacity: 0;}
10% {-webkit-transform: scale(1); opacity: 1;}
99.9% {-webkit-transform: scale(0.1); opacity: 1}
100% {-webkit-transform: scale(0.1); opacity: 0}
}
#r2 { -webkit-animation-delay: 1s;}
#r3 { -webkit-animation-delay: 2s;}
#r4 { -webkit-animation-delay: 3s;}
#r5 { -webkit-animation-delay: 4s;}
#r6 { -webkit-animation-delay: 5s;}
The idea is to make the ring appear at minscale, go from min scale to max scale, and then make it disappear.
To make that for n rings, you don't need to create different animations, just reuse the same with an initial delay.
I misread your question and didn't see that you wanted the oposite of the video. I fixed it later setting the animaion in reverse; sorry !
webkit demo
A better solution:
CSS
.ring {
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
background-color: transparent;
border: 15px gray solid;
-webkit-animation-name: ani;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 6s;
-webkit-animation-direction: normal;
}
#-webkit-keyframes ani {
0% {-webkit-transform: scale(0.01); opacity: 0}
1% {-webkit-transform: scale(0.01); opacity: 1}
95% {-webkit-transform: scale(1); opacity: 1;}
100% {-webkit-transform: scale(1); opacity: 0;}
}
#r2 { -webkit-animation-delay: -1s;}
#r3 { -webkit-animation-delay: -2s;}
#r4 { -webkit-animation-delay: -3s;}
#r5 { -webkit-animation-delay: -4s;}
#r6 { -webkit-animation-delay: -5s;}
new demo
I have changed the keyframes so that now it can run in normal. More important, setting the delays to negative, you can keep the rings separate, but the animation starts right away.
in addition to scaling you would have to dynamically add smaller rings and attach the css animations to them after a certain period. The larger rings should be removed accordingly.
You will have to use jquery for that. The smaller rings should be id'd properly.
Suppose at t=0 you have 7 rings id'd r1-r7(outwards). When the seventh ring scales out of sight, add another ring inside(with an id of r7) and add animation to it. Repeat this infinitely.