.bg-grass{
width: 100%;
height: 290px;
background-size: :100%;
background-image: url(../graphic/background/001.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite;
-moz-animation: animatedBackground 20s linear infinite;
-webkit-animation: animatedBackground 20s linear infinite;
}
.grass-speed2{
animation: animatedBackground 5s linear infinite;
-ms-animation: animatedBackground 5s linear infinite;
-moz-animation: animatedBackground 5s linear infinite;
-webkit-animation: animatedBackground 5s linear infinite ;
}
I have two css classes which one is to have a normal animation and another to make it faster. The scenario would be that at certain time, the grass-speed2 class would be added into bg-grass to make the speed faster. It works fine in firefox but its not working in chrome. Am not sure why. Also is there a way to make it continue which background position it is currently at when the speed is being increased?
EDIT 1
I have forgotten to add in the keyframe css
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
This might be better handled through the use of animation key-frames. Instead of using different classes, try perhaps using different percentages in the key-frames combined with seconds. Here is an example using top. Of course, you can replace this (or add more) with the more appropriate animation type.
#keyframes animatedTop {
0% {
top: 0;
}
90% {
top: 5px;
}
100% {
top: 8px;
}
}
Remember to include the prefixes.
/* #-webkit-
#-moz-
#-o-
*/
And you can call your animation by using.
.myClass {
animation: animatedTop 15s;
}
Please upload your code some where and make a demo so that we can figure-out the real problem.
Just a quick note, remember to add browser vender prefix before keyframe css as well:
#-webkit-keyframes animatedBackground{...}
#-moz-keyframes animateBackground{...}
#-o-keyframes animateBackground{....}
Probably this may solve your problem.
Enjoy css keyframe animation!
Related
I am doing some mistake in animating the image.Can anyone help me in making it correct. Codepen link
<div class="animation"></div>
You have to put a sprite with each step with the same width and height, like 10 steps, and in your keyframe animation could split the animation by 10 (10%,20%) and each keyframe move to this famous sprite width. Start by make a good sprite ;)
Demo : https://jsfiddle.net/simurai/CGmCe/
....
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
....
I have written the following CSS and put it element:after to delay the hover effect to close.
transition: .50s all;
transition-delay: 3s;
Now I want the hover effect will be close after 3 even if the cursor is on the element.
In CSS is there any way to do it?
You could use a keyframe animation instead, whilst setting the iteration count to 1:
note
Prefixing will be required.
Demo
div {
transition: all 0.8s;
height: 300px;
width: 300px;
background: tomato;
}
div:hover{
-webkit-animation: 3s linear hoverit;
-webkit-animation-iteration-count: 1;
-moz-animation: 3s linear hoverit;
-moz-animation-iteration-count: 1;
animation: 3s linear hoverit;
animation-iteration-count: 1;
}
#-webkit-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#-moz-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
<div></div>
use animation instead of transition
#keyframes doMagic {
0% {
// initial styles
}
100% {
// hover styles
}
}
.selector {
animatiom: doMagic 3s ease forwards;
animation-delay: 3s; // not sure if u need it
}
using the keyword forwards you tell the animation to stay in its finished state
read more on http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
if you DONT put that . the animation will play to 100% then go to initial state
I am trying to make a similar example like https://css-tricks.com/svg-line-animation-works but I would like it to rotate infinite.
#path1 {
stroke-dasharray: 170;
-webkit-animation: animate1 5s infinite; /* Chrome, Safari, Opera */
animation: animate1 5s infinite;
}
#keyframes animate1 {
to {
stroke-dashoffset: 1000;
}
}
#-webkit-keyframes animate1 {
to {
stroke-dashoffset: 1000;
}
}
I made an example http://jsfiddle.net/46cmu71t/. I put the code to do this infinite but it slow down and then start again. Is there any way to make it rotate without losing speed?
Very easy to do, add the linear method to the transition line:
#path1 {
stroke-dasharray: 170;
-webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */
animation: animate1 5s infinite linear;
}
More about CSS transition timing
More about CSS transitions
JSFiddle Demo
Might want to read up a bit more on CSS Animations. The property you’re looking for is called a timing function. By default an animation is set to ease-out, and you should be using linear instead. E.g.
#path1 {
stroke-dasharray: 170;
-webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */
animation: animate1 5s infinite linear;
}
Updated fiddle: http://jsfiddle.net/mfgmxhqm/
I've just set up a few css animations and everything is running smoothly in Chrome and Safari however Firefox doesn't appear to be playing nice.
The following code:
#clock-animation .hour {
-webkit-animation: anti-spin 30s infinite;
animation: anti-spin 30s infinte;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
Appears to be displaying as:
#clock-animation .hour {
transform-origin: 50% 50% 0;
}
When viewed in Firebug and consequently the animation isn't playing.
I'm a tad confused as to why this is and nothing appears to be fixing it.
Here are the keyframes used too:
#-webkit-keyframes anti-spin {
100% {
-webkit-transform: rotate(-360deg);
}
}
#keyframes anti-spin {
100% {
transform: rotate(-360deg);
}
}
According to http://shouldiprefix.com/ the -moz prefix isn't needed for keyframes, animation or transform. Nor is the -webkit which is only needed for Chrome and Safari. Any help would be great.
Edit: Just to mention that the IDs and classes are part of an inline SVG file. I'm not sure if that is relevant or not?
Edit: Heres a link to a demo https://jsfiddle.net/0Lha6dfg/ (Works fine in Chrome / Safari but not in FF (36.0.1))
Make sure to write out your animation shorthand property in full, do not skip properties. Shorthand format from w3 specs:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Becomes:
div {
animation: example 5s linear 2s infinite alternate;
}
So in your example add the animation-delay:
animation: anti-spin 30s linear infinite;
Should be:
animation: anti-spin 30s linear 0s infinite;
Also watch out for typos, in some places you have "infinte" instead of "infinite".
I'm wondering if it would be possible to achieve an "accelerate, then coast" animation with css, like in this 3D.js example
Basically, an object starts with 0 speed and accelerated its movement until a certain point, and after that, it keeps a constant speed.
I thought it could be accomplished by applying the rotation animation twice to the same element, but with different parameters:
* first rotation: the object rotates during 2 seconds, with no delay, with an ease-in function;
* after that: the object rotates during 1.5 seconds with a 2 seconds delay to account for the first rotation, with a linear function. This time the rotation repeats infinitely.
So I tried the following code
.square {
width: 120px;
height: 120px;
background: #c00;
-webkit-animation:
spin 2s 0 ease-in 1,
spin 1.5s 2s linear infinite;
-moz-animation:
spin 2s 0 ease-in 1,
spin 1.5s 2s linear infinite;
animation:
spin 2s 0 ease-in 1,
spin 1.5s 2s linear infinite;
}
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% { transform:rotate(360deg); }
}
I know it's not the same as the 3D.js example, but it's close enough. The problem is that the object stops a bit before finishing the first rotation and it looks really weird.
I've prepared a fiddle to show the problem: http://jsfiddle.net/e0sLc8sw/
Any idea?
Thanks everybody for your help!
is it not just because you have added 2 times to the second animation?
According to MDN, the second time entry is treated as an animation-delay, which tells the animation to start after that period of time.
Removing the 2s part from the animation works fine:
.square {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
width: 100px;
height: 100px;
background: #c00;
-webkit-animation:
spin 2s 0 ease-in 1,
spin 1.5s linear infinite;
-moz-animation:
spin 2s 0 ease-in 1,
spin 1.5s linear infinite;
animation:
spin 2s 0 ease-in 1,
spin 1.5s linear infinite;
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% { transform:rotate(360deg); }
}
<div class="square spinning">:D</div>
UPDATED FIDDLE
The previous examples don't work in modern Chrome (2018). Here's an updated example using a cubic bezier curve to handle the acceleration - you can play around with the acceleration parameters here.
The first animation handles the acceleration - the 3s here indicates it will get to the last frame after 3 seconds with the bezier acceleration function. It then terminates. The 3s in the second animation indicates this one begins exactly where the other one left off, ie it has a 3 second delay, but this one never terminates as it has "infinite" duration. It's much faster at 0.5 seconds.
Ideally the 0.5 second speed should be matched to the precise speed of the first animation caused by the Bezier acceleration. This is a manual calculation I don't think CSS helps with and I didn't perform here, just used an eye test.
.square {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
width: 100px;
height: 100px;
background: #c00;
animation:
spin 3s cubic-bezier(.52,.29,.83,.13),
spin 0.5s linear 3s infinite;
}
#keyframes spin {
100% { transform:rotate(360deg); }
}
<div class="square spinning">:D</div>