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
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 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
I want to animate two (or more) CSS transform properties separately using keyframe animation like this:
#keyframes translatex {
100% {
transform: translateX(100px);
}
}
#keyframes rotatez {
100% {
transform: rotateZ(80deg);
}
}
HTML:
<div class="rect"></div>
The translatex animation should start with a 0s delay and last for 5 seconds. The rotatez animation should start with a 1s delay and last for 3 seconds. The .rect element starts moving, then after 1 second it starts rotating, then after 3 seconds it stops rotating and after 1 more second it finishes its movement.
Apply animation:
.rect {
animation-name: translatex, rotatez;
animation-duration: 5s, 3s;
animation-timing-function: ease, ease-in-out;
animation-delay: 0s, 1s;
animation-direction: forward, forward;
}
The problem is that only the rotatez animation is applied.
Are there ways to implement the animation using only CSS, such as keyframe animation or transitions, or do I need JavaScript and requestAnimationFrame?
Yes, it is possible. Instead of calling two animation-names, create only one animation with both actions inside:
#keyframes translateXandZ {
100% {
transform: translateX(100px) rotateZ(80deg);
}
}
Look at Google's "Animate your HTML5" presentation.
Here is a workaround, even though it is a bit of a coarse version:
#-webkit-keyframes translateXandZ {
0% {-webkit-transform: translateX(0px) rotateZ(0deg);}
2% {-webkit-transform: translateX(1px) rotateZ(0deg);}
5% {-webkit-transform: translateX(3px) rotateZ(0deg);}
20% {-webkit-transform: translateX(20px) rotateZ(0deg);}
80% {-webkit-transform: translateX(80px) rotateZ(80deg);}
95% {-webkit-transform: translateX(97px) rotateZ(80deg);}
98% {-webkit-transform: translateX(99px) rotateZ(80deg);}
100% {-webkit-transform: translateX(100px) rotateZ(80deg);}
}
Your animation is linear, but to make it ease-in-out, I played with the beginning and ending of the animation. It's still not perfect, but this is the only way I see how you could get what you want.
I just set an animation to a div and it succeeded.
Now I want to get it proved because its delay is too short!
so how can I add the delayed time between animation (0% to 25%) and animation (25% to 50%)
here is the code:
#flow{
position:absolute;
-webkit-animation:mymove 10s ease-in-out;
-webkit-animation-iteration-count:3;
-webkit-animation-delay:1s;
}
#-webkit-keyframes mymove
{
0%{left:5px;}
25%{left:127px;}
50%{left:249px;}
75%{left:371px;}
100%{left:5px;}
}
everyone!Thanks for your attention !I have found the answer but I don't know the Api of the definition of percentage in keyframes!And if you know sth about it ,just give me a hand ,thanks a lot!
#-webkit-keyframes mymove
{
0%{left:5px;}
25%{left:127px;}
26%{left:127px;}
27%{left:127px;}
28%{left:127px;}
29%{left:127px;}
30%{left:127px;}
31%{left:127px;}
32%{left:127px;}
33%{left:127px;}
34%{left:127px;}
35%{left:127px;}
50%{left:249px;}
75%{left:371px;}
100%{left:5px;}
}
I don't think you can delay the single parts of an animation. What you could do, is to use two animations and start them with a delay.
#flow{
position:absolute;
-webkit-animation:
mymove_first 10s 0s 10 ease-in-out,
mymove_second 10s 2s 10 ease-in-out;
}
#-webkit-keyframes mymove_first
{
0%{left:5px;}
25%{left:127px;}
}
#-webkit-keyframes mymove_second
{
50%{left:249px;}
75%{left:371px;}
100%{left:5px;}
}
I ran into this problem, as far as I can find, without jQuery you can't delay the frames.
You can delay the start of the animation.
You can also get the animation to finish the same state as the original frame.
The mean one I use, is being able to do multiple animations, for example:
Your div:
<div id="bannerImg" class="banner-RunAnimation"></div>
Run animation
.RunAnimation {
-webkit-animation: animation1 3s 0s 1 ease-in-out,
animation2 5s 5s 1 ease-out forwards;
}
Animations:
#-webkit-keyframes animation1 {
0% {-webkit-transform: translateY(-0px);}
50% {-webkit-transform: translateY(-150px);}
100% {-webkit-transform: translateY(-150px);
opacity:0;}
}
#-webkit-keyframes animation2 {
0% {transform: translateY(-0px);}
100% {transform: translateY(-150px);}
}
By delaying the animations and using opacity, you can do qutie a few things, if this doesn't help look into jQuery
You can pause it playing with the percentages ( following your example ):
#-webkit-keyframes mymove
{
0%{left:5px;}
25%{left:127px;}
35%{left:127px;}
50%{left:249px;}
75%{left:371px;}
100%{left:5px;}
}
you dont need to put all the percentages between 25% and 35%, the browser is ignoring them.
you move from 0 to 25% from pixel 5 to 127, if your animation is 10 seconds it will take 2.5 seconds to do that, then pause 1 second between 25% to 35% since its the same pixel it wont move then continue to the next animation to pixel 249, it will take 1.5 seconds and so on...
hope this helps!