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
Related
Is it possible to prevent the small 'lag' at the end of a css animation?
I am trying to have 4 balls spin around each other constantly. They spin fine, but at the end of each 360deg cycle, there is a very short but noticeable pause.
I know 'animation-fill-mode: forwards' is supposed to make the animation remember its' final state but that doesn't seem to fix the issue.
Perhaps there is a better way to set-up the rotation than the method I have used? Which makes the transition between each animation iteration smoother...
#keyframes container-rotate {
to {transform: rotate(360deg); }
}
animation-name: container-rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
Example here:
http://codepen.io/Recidvst/pen/wGbjvz
Thanks!
Try changing the value of your animation-timing-function to linear. You're currently using ease-in and ease-out which vary the speed of the animation at the beginning or end. linear will use the same speed the whole time.
Updated CodePen.
Here's some info on what the various timing functions look like on a graph across time.
Have you tried animation-timing-function: linear;? or just leaving it as the default ease?
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
Ok so I've got a project where I am making a cartoon version of a record player. I want the play button on the side to toggle the animation of the record spinning using webkit, while at the same time starting the audio track. The audio track is fine but now sure about affecting the webkit from the button. What's the best way to do this? I'd rather avoid JQuery.
Any nod in the right direction would be great.
You can achieve what you want with CSS transforms and CSS animations. The following demo shows how to do the spin:
http://jsfiddle.net/FSkKn/
div {
/* add -webkit, moz, and o prefixes to the property below */
/* change 2s to the time you want for one revolution */
animation: spin 2s linear infinite;
}
#keyframes spin {
/* both the keyframe above and the transform properties below need prefixes */
from {
transform:rotate(0deg) ;
}
to {
transform:rotate(360deg);
}
}
Now you have something spinning, you just need to trigger it. The best way would be to add a class to the div (or element you are using) when the button is clicked. Then add the animation property to a selector with that class, such as:
.spin-baby-spin {
animation: spin 2s linear infinite;
}
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
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