Fading CSS Slideshow without js that loops - css

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.

Related

CSS: Don't ease each step in animation

EDIT:
Looking back to this question, I see that it was formulated quite difficult, but to this day I'm still wondering whether it is possible.
My example really isn't that helpful or important. Maybe this will clear up things:
An animation (let's say w/ 4 steps) when set to ease it will always ease every step of the animation. My question is, whether it is possible to apply the animation timing function for all 4 steps altogether without having to run some complicated math w/ a cubic bezier
__
I was wondering if there was a way to apply CSS easing within an animation to the complete animation and not for each step.
My problem:
.animation {
animation: crazyAnimation 1s ease;
}
This will ease each step from this animation:
#keyframes crazyAnimation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
What i was trying to achieve was a smooth bounce from 0 -> up 10px -> back down to 0.
The animation timing function ease will cause the animation to start slow at 0 -> speed up -> slow down to -10px -> speed up -> slow down to 0
What I was trying to achieve was the animation to start slow -> speed up -> and end slow when going back to 10px again.
I fixed it for now using this:
#keyframes crazyAnimation {
0% {
transform: translateY(0);
animation-timing-function: ease-in;
}
50% {
transform: translateY(-10px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0);
}
}
That only works for a 3 step animation though.
I hope I was able to describe the problem correctly, any ideas how to fix this?
I appreciate all the help.

jQuery chaining, fadeIn and fadeOut with only CSS

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.

css3 animate pngs with transparency

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; }
}

animating elements sequentially in pure css3 on loop

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

add delayed time in css3 animation

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!

Resources