This question already has an answer here:
!important with keyframe animations
(1 answer)
Closed 4 months ago.
I'm trying to do some animation with CSS. However, I can't seem to get hue-rotate to actually... well, animate. If I directly specify a filter in #docs-branding-logo, that gets applied, but when its in an animation, nothing happens
I'm currently on Firefox. I've tried this on Chrome and Edge as well, same result
#keyframes rainbowlogo {
0% {filter: hue-rotate(0deg)!important}
10% {filter: hue-rotate(36deg)!important}
20% {filter: hue-rotate(72deg)!important}
30% {filter: hue-rotate(108deg)!important}
40% {filter: hue-rotate(144deg)!important}
50% {filter: hue-rotate(180deg)!important}
60% {filter: hue-rotate(216deg)!important}
70% {filter: hue-rotate(252deg)!important}
80% {filter: hue-rotate(288deg)!important}
90% {filter: hue-rotate(384deg)!important}
100% {filter: hue-rotate(360deg)!important}}
#docs-branding-logo {
animation-name:rainbowlogo!important;
animation-duration:3s!important;
animation-iteration-count:infinite!important;}
Remove the !important will solve the problem
#keyframes rainbowlogo {
0% {filter: hue-rotate(0deg)}
10% {filter: hue-rotate(36deg)}
20% {filter: hue-rotate(72deg)}
30% {filter: hue-rotate(180deg)}
40% {filter: hue-rotate(144deg)}
50% {filter: hue-rotate(180deg)}
60% {filter: hue-rotate(216deg)}
70% {filter: hue-rotate(252deg)}
80% {filter: hue-rotate(288deg)}
90% {filter: hue-rotate(384deg)}
100% {filter: hue-rotate(360deg)}}
#docs-branding-logo {
animation-name:rainbowlogo;
animation-duration:3s;
animation-iteration-count:infinite;
width:100px;
height:100px;
background-color:red;
}
<div id='docs-branding-logo'> </div>
Related
I am trying to achieve a simple animation with css.
My markup has the following structure:
<main>
<left />
<middle />
<right />
</main>
I want my animation to do the following sequence:
// second 0 - 2: Do nothing
// second 2 - 3: hide the middle element, move the left element to the right, and the right element to the left.
// second 3 - 4: Rotate the main element 360 degrees
// second 4 - 6: Do nothing
// second 6 - 7: show the middle element, move the left element to the left, and the right element to the right.
// Repeat
Here is my css code:
#keyframes hideMiddle {
28.57%, 42.85% {opacity: 0;}
85.71%, 100% {opacity: 1;}
}
#keyframes moveRight {
28.57%, 42.85% { transform: translateX(15%);}
85.71%, 100% {transform: translateX(0%);}
}
#keyframes moveLeft {
28.57%, 42.85% {transform: translateX(-22%);}
85.71%, 100% {transform: translateX(0%);}
}
#keyframes rotateMain {
42.85%, 57.14% {transform: rotate(360deg);}
}
Everything works until I add the rotateMain animation at which point it seems to run from the start of the animation rather than where its set to start as well as it seems to do an extra rotation. Any help is appreciated, thanks a lot.
So after playing around a bit I figured it out, I'm leaving an answer to the question in case anyone finds some use in this although its not the best formulated question:
So the problem was in the rotate keyframes, I used this:
#keyframes rotateMain {
42.85%, 57.14% {transform: rotate(360deg);}
}
Thinking it would rotate the figure 360 degrees from 42.85% to 57.14%.
The following code actually achieves what I wanted:
#keyframes rotateMain {
42.85% {transform: rotate(0deg);}
57.14% {transform: rotate(360deg);}
100% {transform: rotate(360deg);}
}
I seem to have an issue with the webkit animations. I added an overlay spinner. This one shows fine on every browser (Mozilla, IE, Edge, Chrome). On Andriod and iPhone/iPad the animation is not fired. Am I missing something in my code?
In CSS I added following to the div of the element:
-webkit-animation-name:webkit-rotate-scale;
-webkit-animation-duration:0.75s;
-webkit-animation-direction:normal;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-play-state:running;
and
#-webkit-keyframes webkit-rotate-scale {
0% {-webkit-transform: rotate(0deg) scale(1);}
50% {-webkit-transform: rotate(180deg) scale(.5);}
100% {-webkit-transform: rotate(360deg) scale(1);}
}
Off course I added the standard (no webkit) alternatives also.
Can someone tell me what I'm missing?
The div where I am showing it in has display: inline-block.
Thanks in advance!
Kind regards,
Jerry
I have a property #keyframes, I compiled with autoprefixer to add the needed prefixes.
What I would like to do, is to add an argument to the animation name (or wherever is possible) to change a value of properties into the keyframes key.
This is what I have right now :
#keyframes loader {
0% { transform: translate(0, -50%) rotate(0deg); }
100% { tranform: translate(0, -50%) rotate(360deg); }
}
And basically what I would like to do :
#keyframes loader(#transform) {
0% { transform: #transform rotate(0deg); }
100% { tranform: #transform rotate(360deg); }
Passing arguments to #keyframes cannot be done directly in Less. We can however wrap the whole #keyframes rule within a parent mixin, pass the argument to that mixin and use it within the frames.
.loader(#transform){ /* wrapper mixin which accepts input parameter */
#keyframes loader {
0% { transform: #transform rotate(0deg); }
100% { transform: #transform rotate(360deg); }
}
}
.loader(translate(0, -50%)); /* mixin call */
(Curt had provided an answer initially but had deleted it for reasons unknown to me.)
Just in case you are interested, generic keyframe mixins can also be written in Less like given below.
Sample 1:
.generickeyframe(#name; #from; #to){ /* takes name, from frame rules, to frame rules */
#keyframes #name{
0% { #from();}
100% { #to();}
}
}
.generickeyframe(loader; {transform: translate(0,-50%) rotate(0deg)};
{transform: translate(0,-50%) rotate(360deg)});
Sample 2:
.keyframefromto(#name; #from; #to){
#keyframes #name{
0% { transform: #from;}
100% { transform: #to;}
}
}
.keyframefromto(loader; translate(0,-50%) rotate(0deg); translate(0,-50%) rotate(360deg));
If multiple frames are required to be present within the #keyframes rule, we could make use of array-list and loops like in the below snippet. This mixin takes the name of the animation, the list of frames (their percentage numbers) and the properties for each frame (in the form of rulesets) as parameters.
.generickeyframe(#name; #framelist; #frameprops){
#keyframes #name{
.loop-framelist(#index) when (#index <= length(#framelist)){
#framepos: extract(#framelist, #index) * 1%;
#{framepos}{
#props: extract(#frameprops, #index);
#props();
}
.loop-framelist(#index + 1);
}
.loop-framelist(1);
}
}
.generickeyframe(loader;
0,25,50,75,100;
{transform: translateX(10px);},
{transform: translateX(20px);},
{transform: translateX(50px);},
{transform: translateX(20px);},
{transform: translateX(10px);}
);
Compiled CSS:
#keyframes loader {
0% {transform: translateX(10px);}
25% {transform: translateX(20px);}
50% {transform: translateX(50px);}
75% {transform: translateX(20px);}
100% {transform: translateX(10px);}
}
If I have the following:
#keyframes play {
0% {background:red;}
25% {background:green;}
45% {background:blue;}
55% {background:orange;}
75% {background:black;}
100% {background:white;}
}
Is it possible to apply this animation to an element in a "discrete" way without transitioning between colors? For example, 25% of the way through the animation, I want the element to change suddenly from red to green. I tried using the steps(6) parameter with no luck.
If not, is there an alternative to do what I want?
Thanks!
NO TRICKS NEEDED
The right way of doing this is through the transition-timing-function property, that defines the effect between the steps of the animation.
One of the values is step-end, that skips the animation step to the end result, so:
-webkit-animation: play 5s step-end;
animation: play 5s step-end;
http://jsfiddle.net/oe5nfy2L/1/
You can do it with a simple trick.
#keyframes play {
0% {background:red;}
24% {background:red;}
25% {background:green;}
44% {background:green;}
45% {background:blue;}
54% {background:blue;}
55% {background:orange;}
74% {background:orange;}
75% {background:black;}
99% {background:black;}
100% {background:white;}
}
Because I use chrome, I changed keyframes to webkit-keyframes.
http://jsfiddle.net/gfvyt9qc/2/
#keyframes play {
0% {background:red;}
24% {background:red;}
25% {background:green;}
45% {background:blue;}
55% {background:orange;}
75% {background:black;}
100% {background:white;}
}
this could do the trick
SOLUTION
For 12s animation :
.rightleftloop {-moz-animation-delay:0s;}
.rightleftloop2 {-moz-animation-delay:3s;}
.rightleftloop3 {-moz-animation-delay:6s;}
.rightleftloop4 {-moz-animation-delay:9s;}
#-moz-keyframes rightleftloopmz {
0% {-moz-transform: translateX(-500px);}
10% {-moz-transform: translateX(300px);}
25% {-moz-transform: translateX(300px);}
40% {-moz-transform: translateX(-500px);}
100% {-moz-transform: translateX(-500px);}
}
PROBLEM
I have four images animating in a loop, sliding in one after another but once all four animations play the loop skips the first animation and loops the 2nd, 3rd and 4th animations. The fist animation only plays when the page is refreshed. If I make changes to the animation delays the images overlap.
.rightleftloop, .rightleftloop2, .rightleftloop3, .rightleftloop4 {
position: absolute;
-moz-animation:rightleftloopmz;
-moz-animation-duration:12.0s;
-moz-animation-iteration-count:infinite;
-moz-animation-fill-mode: both;
}
.rightleftloop {-moz-animation-delay:0ms;}
.rightleftloop2 {-moz-animation-delay:4000ms;}
.rightleftloop3 {-moz-animation-delay:8000ms;}
.rightleftloop4 {-moz-animation-delay:12000ms;}
#-moz-keyframes rightleftloopmz {
0% {-moz-transform: translateX(-500px);}
15% {-moz-transform: translateX(300px);}
35% {-moz-transform: translateX(300px);}
50% {-moz-transform: translateX(-500px);}
100% {-moz-transform: translateX(-500px);}
}
<div class="rightleftloop"><img src="http://images.sodahead.com/polls/0/0/0/7/5/4/9/9/7/polls_batman_icon735_1455_711105_poll.jpeg"/></div>
<div class="rightleftloop2"><img src="http://fc04.deviantart.net/fs71/f/2011/202/e/0/superman_icon_4_by_jeremymallin-d417qjg.png"/></div>
<div class="rightleftloop3"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/256/Happy_Hulk.png"/></div>
<div class="rightleftloop4"><img src="http://megaicons.net/static/img/icons_sizes/189/462/256/comics-thor-icon.png"/></div>
The pen has animation code for all browsers :
http://codepen.io/MBM/pen/seIiE