I can't find any answers on google, so I'm trying here:
Is there a way for animation-timing-function property to work for an animation as a whole? Because now it is acting on midpoints, rather than on the whole animation. I mean, I have this animation:
Codepen link
and the animation-timing-function property is set to ease-in. But rather than the whole animation easing in, the 0% - 50% part eases separately from 50% - 100% part, and because of it, the animation isn't smooth. Is there a way to do this?
Related
I am trying to animate a list of html elements with following CSS property:
animation: slide-right 10s linear infinite 0s;
Animation is perfect for me but, when list finish I would like to have a loop behaviour instead of a jerky transition that restart the animation because of infinite property of animation.
I tried to workaround it appending items via jQuery but it doesn't work. It's possible to do a loop animation with css3?
I got inspiration from this codepen: https://codepen.io/goomy/pen/vXKGGz
Thanks in advance
UPDATE: My code here
By "loop" I am going to assume you mean you want the element to re-appear from the bottom of the screen once it has vanished off the top of the screen.
One way to achieve this could be to set overflow-y: hidden on your body element, and then define the animation keyframes in terms of viewport height units, vh. If you translate an element to appear at y = 110vh then (assuming the document doesn't overflow) you know that it must appear off-screen since the very bottom of the body element is at 100vh. Similarly, you can transition to something like -10vh at the top, assuming the element is less than 10vh tall.
I modified your CodePen to illustrate this idea:
https://codepen.io/anon/pen/pwBxPL
I have a CSS-animated background position.
body {
background: linear-gradient(320deg, #000, #3ff);
background-size: 10000% !important;
animation: AnimationName 1s linear infinite;
}
#keyframes AnimationName {
0%{background-position:top left}
50%{background-position:bottom right}
100%{background-position:top left}
}
I have a range slider set up for the user to change the speed, by setting the animation-duration style property. The trouble is, the animation jerks to different parts of the animation as this property is changed. That is, if the animation-duration is 0.1s and it is changed to 5s over the course of a second or so, the background position is seemingly randomly popped around. You can see this for yourself in the fiddle:
https://jsfiddle.net/x97adpe6/2/
I suspect this is happening as the browser is using some sort of time-based calculation to determine where the animation should be for the given animation duration, rather than offsetting the time based on where it is. That is, if the animation duration is changed from a long time, to a short time, and back to a long time, the effect is as if the animation was never changed from the long time.
What I would like to happen is the natural result of changing the speed of something. I don't need any tweening between speeds, but I do want the animation to continue on at the new speed from wherever it is at this moment.
Is this possible, short of re-implementing the whole animation in JavaScript?
I'm using css steps to create a "light board" you could say.
So there's a column of 18 divs that act as a "bulb".
The animation moves a div behind it that acts as the "lit up bulb "
My keyframes are set as:
#keyframes strobe{
to{
transform:translateX(1800%);
}
}
And my animation is set as:
animation:strobe 2s steps(18, start) infinite;
Currently the animation never includes it's original position. (I also tried using 0% - 100% for the keyframes)
How can I include the initial position in the steps? And why is it currently not?
Included a fiddle for reference. Still working on responsive, so it doesn't show as 18 divs across.
https://jsfiddle.net/btxffgfj/
Playing around with your fiddle, I tried changing start to end and that seems to work.
animation:strobe 2s steps(18, end) infinite;
Fiddle
I wanted to draw a curved animation and after a lot of doing monkey coding I get the desired result. But I'm stuck how does this work!
Look this picture: demo
Now look this picture too: demo
I got the desired animation that is curved animation after just removing left: 50px; from 50% keyframes
But, I wanted to know how this is becoming curved as it's initial position is left: 50px;, not? Even if I don't place the left value it should go like previous but amazingly it's curving. So anyone have some idea about this?
From MDN - #keyframes
When properties are left out of some keyframes
Any properties that you don't specify in every keyframe are interpolated
And it seems the values are interpolated midway from the current to the next given value, using the animation-timing-function, which is ease in your case.
When you change the timing function to linear for example, you get a straight line
#ball {
animation-timing-function: linear;
}
See modified JSFiddle
Finally I got it now that how this works.
When one property is left(i.e. removed) then it's value is increased accordingly.
Example:
0%{bottom: 0%; left:0%;}
50%{bottom: 0%;}/*the left property is left(removed)*/
100%{bottom: 100%; left: 100%;}
In the above code the value of left in 50% is initial(animation from 0%) = 0% and end point (animation to 100%) = 100%.
So here the bottom value will be the same defined in 50% keyframe but the value of left will increase accordingly that is
from 0% to 1%, 2%, 3%, 4%, and so on. Likewise, if you left(remove) the bottom property and keep(add) left property then it
will increase the value of bottom accordingly.
See this demo to make your concept clearer.
Hence the demonstration in the question is being viewed curved.
By the way of this concept I've made a demo to make a circular animation also.
P/s: the animation-timing-function rather than ease works differently.
Try this yourslef::demo by changing the value from ease to anything you want such as ease-in-out.
I have a loading indicator (a bar that continuously animates its width from 0% to 100%) using css3 keyframes. I trigger this behavior by adding a .loading class to by loading bar. Now once I am done loading I would like to animate out of the keyframes. Say, for example at the time that I finish loading the width is animated to 50% I would not have it jump to 100%, but ease it to 100% where it should stay.
I have tried adding a transition and animation to my loading bar class, but neither seems to be working. How do I go about this?
Here's the jsFiddle.
You can use the animationiteration (MDN) event to detect when the animation reaches the end of a loop and then remove the class.
$('#bar').on('webkitAnimationIteration', function(e){
$('#bar').removeClass('loading').off('webkitAnimationIteration');
});
I've updated the fiddle here: http://jsfiddle.net/jedidiah/kYnhF/6/
-
For simplicity I've only added the webkit prefix to the the fiddle but there is a useful article about css animation events in javascript here http://www.sitepoint.com/css3-animation-javascript-event-handlers/ where they share a little function to simplify using the prefixes you could use to support other browsers.
I upvoted #Jedidiah answer, I think that is what you need.
BTW, If you are interested in an alternative, simple CSS3 solution, then add to your #bar:
transition: all 1s;
-webkit-transition: all 1s
Running Demo
Potential drawbacks (depending on your needs):
It won't respect the previous speed of the progressbar (no matter if you are at 10% or 90%, the remaining part will take 1 second to complete... but this is how often the progressbars of the installers work, so it may not be a problem);
It won't run all the animation: if you are in the first half, it will fill to the left, instead of completing all the round.