Change of logo with CSS3

Question

I need a CSS3 code to automatically switch 20 logos with fade, without the previous logo appearing on the back. But I have no idea how to do it! Someone can help me?

(If someone answered the last one, maybe I wouldn’t have to ask again)

Answer 1

There are several ways to do this, the problem is that with only CSS there is no dynamic way to do it. If you want to add more images in the future, you will have to update your code. I’d do it this way:

Generate an Sprite with the images you want to switch. You can use Photoshop or some other image editing tool or even an online generator.

For example I used this: http://spritegen.website-performance.org

With the Sprite on hand just add the background-position corresponding to each step of your animation

.flag {
    background: url(http://i.imgur.com/NE2SSL4.png) no-repeat -5px -5px;
    width: 16px;
    height: 11px;
    animation: flags 10s infinite;
}

@keyframes flags {
    0%   { background-position: -31px -5px  }
    10%  { background-position: -57px -5px  }
    20%  { background-position: -83px -5px  }
    30%  { background-position: -109px -5px }
    40%  { background-position: -135px -5px }
    50%  { background-position: -161px -5px }
    60%  { background-position: -187px -5px }
    70%  { background-position: -213px -5px }
    80%  { background-position: -239px -5px }
    90%  { background-position: -265px -5px }
    100% { background-position: -291px -5px }
}

<div class="flag"></div>

You can play with opacity and etc to generate the fade effect..

It follows a deeper reading on the subject

https://drafts.csswg.org/css-animations-1

Here’s an answer that might have something interesting for you

How to make dynamic animations with CSS3?

@Edit:

A second approach you can also use is to switch the opacity with a predetermined timing.

It works like this, you need to do the calculations and altenar the opacity of the elements so that when one is being shown the others are hidden.

Imagine the following scenario, I want to mount a slider with 3 images that lasts 6 seconds.

Let’s have it

2s

[ 1 ] -> Shows
[ 2 ] -> Hide
[ 3 ] -> Hide

4s

[ 1 ] -> Hide
[ 2 ] -> Shows
[ 3 ] -> Hide

6s

[ 1 ] -> Hide
[ 2 ] -> Hide
[ 3 ] -> Shows

Then it will be necessary a last step to show the first element again, closing 8 seconds.

And here’s an example of how it would look

.flags {
    width: 16px;
    height: 11px;
    background-color: #eee;
    margin: 1em 0;
    position: relative;
}


.flags i {
    background-image: url(http://i.imgur.com/NE2SSL4.png);
    background-repeat: no-repeat;
    width: 16px;
    height: 11px;
    display: block;
    position: absolute;
}

.flag-br {
    background-position: -31px -5px;
    animation: first_image 8s infinite;
}

.flag-se {
    background-position: -239px -5px;
    animation: second_image 8s infinite;
}

.flag-ao {
    background-position: -5px -5px;
    animation: third_image 8s infinite;
}

@keyframes first_image {
    0%     { opacity: 1 }
    33.33% { opacity: 0 }
    66.66% { opacity: 0 }
    100%   { opacity: 1 }
}

@keyframes second_image {
    0%     { opacity: 0 }
    33.33% { opacity: 1 }
    66.66% { opacity: 0 }
    100%   { opacity: 0 }
}

@keyframes third_image {
    0%     { opacity: 0 }
    33.33% { opacity: 0 }
    66.66% { opacity: 1 }
    100%   { opacity: 0 }
}

<div class="flags">
	<i class="flag-br"></i>
	<i class="flag-se"></i>
	<i class="flag-ao"></i>
</div>

Answer 2

Came to mind the use of Animation available in css3 I alternated only 10 colors, but you can already get a base...

/* Codigo CSS */
#logo {
    width:100px;
    height:100px;
    background:red;
    -webkit-animation: AlterarLogos 5s infinite;
    animation: AlterarLogos 5s infinite;
}
/* KEYFRAMES */ 
@-webkit-keyframes AlterarLogos {
    0% {background:red;}
    10% {background:blue;}
    20% {background:green;}
    30% {background:yellow;}
    40% {background:purple;}
    50% {background:black;}
    60% {background:white;}
    70% {background:pink;}
    80% {background:brown;}
    90% {background:grey;}
    100% {background:gold;}


}

@keyframes AlterarLogos {
    0% {background:red;}
    10% {background:blue;}
    20% {background:green;}
    30% {background:yellow;}
    40% {background:purple;}
    50% {background:black;}
    60% {background:white;}
    70% {background:pink;}
    80% {background:brown;}
    90% {background:grey;}
    100% {background:gold;}


}

EXEMPLO:

<div id="logo"></div>