Logo switching with CSS3 [duplicate]

Question

Logo switching with CSS3 [duplicate]

Navigation

#1 by (5 votes)
#2 by (1 votes)

-4

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

(If someone answered the last, I might not have to ask again)

javascript html css3

asked by anonymous 03.01.2016 / 12:42

2 answers

Loop error foreach: syntax error, unexpected 'foreach' (T_FOREACH), expecting ')' [closed] Error Parse error: syntax error, unexpected ';' in C: \ xampp \ htdocs \ adocao \ backend \ valida.php on line 32

score 5 · Answer 1

There are several ways to do this, the problem is that with only CSS you can not do dynamic. If you want to add more images in the future, you'll have to update your code. I would do it like this:

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

For the example I used this: link

With the sprite in 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 ..

Further reading on the subject

link

Here is an answer that may have something interesting for you

How to make dynamic animations with CSS3?

@Edit:

A second approach you can also use is to switch opacity with a pre-determined timing.

It works like this, you have to do the calculations and take 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 this

2s

[1] - > Mostra
[2] - > Hiding
[3] - > Hide

4s

[1] - > Hiding
[2] - > Mostra
[3] - > Hide

6s

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

Then you will need a last step to display the first element again, closing 8 seconds.

And here's the example of what it would look like

.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>

score 1 · Answer 2

I came to the use of Animation available in css3 I switched 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>