I have a red square moving left and right. And then it stops, how do i make it that it goes on till i leave the web page?
Add the property infinite
For example
-webkit-animation: NAME-OF-ANIMATION 10s linear infinite;
See this example
Related
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 want to make my image stop changing.
How can I do this?
Demo: http://forum.8s.nl
In header.css line 37 please remove
-webkit-animation: slide 70s linear infinite;
header.css location
http://forum.8s.nl/cache/themes/theme4/header.css
Why does Firefox reverse an animation back to the start if you remove it whereas webkit snaps it back to the start position? Is there a difference in how they handle this?
I have an animation that flips an image of a record sleeve downwards towards the viewer (in 3D). The idea is to simulate flipping through records.
As the first image flips down you can see the back image appear and also reveal the next image behind it.
It uses fill-mode forwards to stop the animation at the end and there is a callback listener set up which I use to update the 'front' image' because, thanks to backface-visibility, at this point it's hidden. It's actually updated to be the image that was revealed behind so that once it returns to the start point it will be come the next image to flip down.
Once that's done I use document.getElementById('flip_rec').className=''; to remove the animation. This returns the animation to the start point and makes it ready to restart it next time. I then update the now hidden reverse and behind images and set a flag to allow the animation to run again.
All that is important because when I remove the image in webkit it snaps the animation back to the start instantly - which works great because you don't notice the fact that the images have been replaced - but with Firefox it reverses the animation. So you see the image flipping backwards, revealing the new front image gradually and allowing you to see the behind image updating. The effect is ruined.
This is the CSS I'm using to set the animation up.
.flip1
{
-webkit-animation-name: mymove1;
-moz-animation-name: mymove1;
animation-name: mymove1;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-animation-timing-function: linear;
/*don't go back to that start! Yet.*/
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
I trying to spin an image using CSS keyframes to rotate(360deg). I used keyframe, but every time when animation is complete there is some kind of delay. Also I tried to set 100% { -webkit-transform: rotate(359deg) }, but it didn't work out, I still get that delay. Do you have any idea to prevent it from delaying after every animation?
Here is the link of what I've done so far.
Thanks in advance!
The default value for the animation-timing-function property is ease so your animation slightly accelerate at the beginning and decelerate at the end. This gives you the sense of delay between the loops.
Set the value to linear to have an infinite linear animation:
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
DEMO