I'm trying to animate in elements sequentially in full css3 animations. Seems the very straight forward answer is using animation delay. However I wanted this in loop, any ideas how to make the animation loop infinitely?
I found this fiddle on a similar question. Basically that's the same logic but I just wanted it looped.
This was the similar [question] (https://stackoverflow.com/a/8294491/340888)
Was using this:
#-webkit-keyframes FadeIn {
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% {-webkit-transform:scale(1); }
}
.myClass img { float: left; margin: 20px;
-webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }
Edit
Just to be clear, I want the animation in a sequential manner, say after the first one animates, it animates the 2nd item, then 3rd.. and so on. I'm thinking about animating around 10 to 12 elements. So they'll animate one after another.
So #Sonu Joshi's answer is incorrect.
You need to make the animation long enough so that all the elements have a chance to animate before the cycle starts again.
In this example, your 4th element only starts animating after 2 seconds. The transition itself is going to take another second, and then you might want a bit of a pause, say another second, before you reanimate the first element. So that's 4 seconds in total.
So you might want something like this: -webkit-animation: Fadein 4s infinite linear.
But you'll also need to adjust the keyframe percentages, dividing each of them by 4, since you still want the transition itself to take only 1 second.
#-webkit-keyframes FadeIn {
0% { opacity:0; -webkit-transform:scale(.1);}
21.25% {opacity:1; -webkit-transform:scale(1.05);}
25% {-webkit-transform:scale(1); }
}
Fiddle example
Related
I am wondering if I can achieve my simple delay -> fadeins (jQuery chaining animations) with only CSS and allow to loop infinitely.
$('.learnwhat').delay(1000).fadeIn(1000);
$('.learnwhat').delay(1500).fadeOut(1000);
$('.seeresults').delay(3000).fadeIn(1000);
$('.seeresults').delay(1000).fadeOut(1000);
$('.personalsolution').delay(6000).fadeIn(1000);
$('.personalsolution').delay(1000).fadeOut(1000);
You can always use css animations and calculate the % of the keyframes by dividing 100% / total seconds.
So for example the
$('.learnwhat').delay(1000).fadeIn(1000);
$('.learnwhat').delay(1500).fadeOut(1000);
would become (1s delay + 1s fadeIn + 1.5s delay + 1s fadeOut = 4.5s, 100% / 4.5 = 22.2% per second or 11.1 per half second since we want that as well)
.learnwhat{
padding:5px;
background:khaki;
border:1px solid #ccc;
animation: learnAnimation 4.5s infinite;
}
#keyframes learnAnimation{
0%{opacity:0}
22.2%{opacity:0}
44.4%{opacity:1}
77.7%{opacity:1}
100%{opacity:0}
}
<div class="learnwhat">learnwhat</div>
I have only included the standard keyframes syntax (no vendor specifics)
You can use the same logic for the other two.
I am trying to create a loader animation using CSS3. Here is the code:
http://codepen.io/raaj-obuli/pen/RPeLer
If you look at the code, I've entered the css, in #keyframe defn, for rotating the squares from 0deg to 360deg ( as like below ). But the dices are not rotating. Please help on this and also let me know if you need more details.
#keyframes tilt{
0%{
transform: scale($scaleMin) rotate($rotateStart);
}
50%{
transform: scale($scaleMax);
background: #BC11FF;
box-shadow: 0 0 2px #D467FF;
}
95%,100%{
transform: scale($scaleMin) rotate($rotateEnd);
background: #11A8FF;
box-shadow: none;
}
}
PS. CSS is written using SCSS in the code sample.
It's missing the rotate() in 50% section.
$rotateMid: 225deg;/*added, adjust the value as needed*/
span {
animation: tilt #{$animDuration}s linear infinite; /*changed to linear*/
}
50%{
transform: scale($scaleMax) rotate($rotateMid); /*changed/added*/
}
Updated: http://codepen.io/anon/pen/QbJmbO?editors=110
Differences between the transition timing functions:
ease-in will start the animation slowly, and finish at full speed.
ease-out will start the animation at full speed, then finish slowly.
ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.
ease is like ease-in-out, except it starts slightly faster than it ends.
linear uses no easing.
Source: https://stackoverflow.com/a/9636239/483779
I'm a "new" web designer, and I'm learning yet !
CSS is little hard to me... Please, somebody help me !! :)
I need to do a 4 image transition with fade, in loop, in a sequence from 1 to 2, than 3 and 4, returning to 1.
I already tryed 2 tutorials from here. But when I change the settings to fit to mine, doesn't Work.
My result is this :
http://www.mafeluvizotto.com.br/crossfading/
After the first sequence, the animation became weard...
The images are here :
...crossfading/1.jpg
(2.jpg, 3.jpg and 4.jpg)
Please, somebody could help me, to solve this ?
Thanks very much !!
The idea behind this is that you need to know the amounts involved. You have to calculate the timing of the animation vs. how many "slides" vs. how long you want them to be displayed for.
In the case of my example, it's 4 slides, 6 seconds each. That helps me calculate the timing of the animation and how long to delay the animation.
The animation timing is determined the 100% of the keyframes divded by the total # of slides, which in this case is 4. That determines that 25% (100/4) is when to fade out -
#-webkit-keyframes fade {
0%{
opacity: 1;
}
15% {
opacity:1;
}
25%{
opacity: 0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
The percentage before the fade-out and fade-in in this case is 10%. 25-10 = 15, and 100 - 10 = 90. That determines the fading time for each slide.
Then, the duration of the animation is determined by slides x display time. 4 slides multiplied by 6 seconds each gives us 24 seconds of duration.
The delay between each is that time minus each slide, or 6 seconds, which results in:
.slide:nth-child(1) {
-webkit-animation: fade 24s 18s infinite;
z-index:10;
}
.slide:nth-child(2) {
-webkit-animation: fade 24s 12s infinite;
z-index:10;
}
.slide:nth-child(3) {
-webkit-animation: fade 24s 6s infinite;
z-index:10;
}
.slide:nth-child(4) {
-webkit-animation: fade 24s 0s infinite;
z-index:10;
}
Here is a demo - http://jsfiddle.net/5zx43/1/
To keep the order of the HTML the same order of the slide-show, z-index will have to be utilized and the delay order of the animations in relation to :nth-child() will need to be reversed.
Here is a demo of "correct" order - http://jsfiddle.net/5zx43/2/
This has a great tutorial on it - http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/
Of course, keep in mind that keyframe and animation prefixes may need to be different for other browsers.
I have images that I want to swap in and out (no slide effect). The first cycle, the images appear stacked on top of each other (since they have holes). All subsequent cycles, it works correctly (only one visible at a time).
Html
<div class="small xfade">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
css
#keyframes xfade {
0% { opacity:1; }
17% { opacity:1; }
25% { opacity:0; }
92% { opacity:0; }
100% { opacity:1; }
}
.xfade span {
animation-name: xfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
height: 100%;
left: 0;
/* opacity: 0; */
position: absolute;
top: 0;
width: 100%;
}
All visible at once during first loop
Only one visible during first loop, but flash
An usual scene when doing animations is where you have the same animation for several elements, but you want them to be delayed, making a sort of full cycle.
Then you set a animation-duration of say 8 seconds, and if you have 4 elements, you set a delay of 0 for the first, a delay of 2s for the second, and 4s and 6s for the others.
The problem with this is that the second element only starts animating after 2 seconds. In the meantime, it has the initial properties, that can match, or not, (usually not) the properties of the animation.
The best way to solve that is to realize that, if the animation-duration is 8s, then setting the delay to 2s is the same than setting it to -6s. because if you count 8s starting in -6s, you will end at 2s. But, then the animation is running from the first moment, with the properties that should have.
So, the delays in your case should be 0s, -6s, -4s, -2s. Just subtract the transition-duration from the transition delay.
Whenever you set an animation, and discover than the first animation is wrong, but after that they are ok, the likely problem (and solution) is this.
If you want to make everything go faster, but everything else being the same, then you have to reduce both the animation duration and all the animation delays
Example setting
.xfade span {
animation-duration: 4s;
}
.xfade span:nth-of-type(1) {
animation-delay: -1s;
}
.xfade span:nth-of-type(2) {
animation-delay: -2s;
}
.xfade span:nth-of-type(3) {
animation-delay: -3s;
}
fiddle
Also, let's analyze how the tween time is computed. First of all, you are setting the animation for an element that shares the full time with another 3 elements. That means that every element has 1/4 of the time, that is 25%.
This time has to be divided between time of full display and time of tween. Inthe original example, tween time is 8%. If you want that reduced, let's say that tween time will be 6%. Then, full display time will be 25 - 6 = 19.
That gives us the first part of the keyframes:
#keyframes xfade {
0% { opacity:1; }
19% { opacity:1; }
25% { opacity:0; }
Now, for the final keyframes, we have to remember that the tween time is 6, and set that at the end. The keyframe mus be at 100 - 6 = 94. Remainig keyframes:
94% { opacity:0; }
100% { opacity:1; }
}
I'm trying to animate (fade-in) 3 buttons. This is my html:
<aside>
<p><i class="icon-facebook"></i> Share</p>
<p><i class="icon-twitter"></i> Tweet</p>
<p><i class="icon-envelope"></i> Mail</p>
</aside>
and this is my css (the class .aside-check gets applied by javascript)
.aside-check {
animation: fadein 2s;
}
#keyframes fadein {
from {opacity:0;}
to {opacity:1;}
}
What I would like now, is to give every paragraph a little delay, I tried
p:nth-child(1) {animation-delay:2s}
p:nth-child(2) {animation-delay:3s}
p:nth-child(3) {animation-delay:4s}
but that doesn't work. Unfortunately I don't know what I did wrong...:/
Well, first you need to apply the animation to the paragraphs not the aside. Always remember, animations don't inherit. Second, don't forget your webkit prefixes! It's a pain but webkit browsers still require -webkit- before all animation properties and keyframe definitions. Without it your animation won't work on, Chrome, Safari, Android, etc. (If you can't remember if you need prefixes take a look at caniuse.com http://caniuse.com/#feat=css-animation)
Also note that if you want the paragraphs to be hidden then revealed you will want to define them with an opacity of 0 and then set the 'animation-fill-mode' to forwards so that the properties in the 'to' frame stick after the animation finishes.
I made a little JS fiddle with a working example, hope it helps!
http://jsfiddle.net/Ashwell/HqBZU/
Here are the important bits:
The animations applied to the paragraphs with the fill-mode set and starting opacity.
.aside-check > p{
animation: fadein 2s;
-webkit-animation: fadein 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
You'll also need the webkit key frames
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And don't forget to add -webkit-animation-delay: 2s; to each of the nth-child selectors with the respected delay time!
I hope this answer isn't coming too late!