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
Related
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?
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 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.
If I have a CSS animation and I want to create various instances of that animation but start at different stages of the animation how can I specify that.
I imagined something like this, second webkit line is pseudo code:
#cell1
{
width:100px;
height:100px;
-webkit-animation: pulse 35s infinite alternate;
-webkit-animation: pulse start at 25%;
}
As I understand the spec, a negative value for animation-delay would do the trick:
http://www.w3.org/TR/css3-animations/#animation-delay
If the value for 'animation-delay' is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset. That is, the animation will appear to begin part-way through its play cycle. In the case where an animation has implied starting values and a negative 'animation-delay', the starting values are taken from the moment the animation is applied.
EDIT: Indeed, this works with my chromium: http://jsfiddle.net/GvUzX/