- Chcę ustawić div.logo by był cały czas widoczny tak jak po otworzeniu strony. Aktualnie tylko przy startowej petli jest logo.png widoczne, jak zaczya się kolejna petla znika i pojawie dopiero przed ostatnim zdjęciem. Mam taki kod:
HTML:
<div id="top">
<div id="animacja" class="shadow">
<img src="img/animacja/test1.jpg">
<img src="img/animacja/test2.jpg">
<img src="img/animacja/test3.jpg">
<img src="img/animacja/test4.png">
<div class="logo">
<img src="img/logo.png" />
</div>
</div>
</div>
CSS:
div#top
{
color:black;
padding:15px;
text-align: center;
min-height:300px;
max-height: 300px;
}
@-webkit-keyframes animacjaFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes animacjaFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes animacjaFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes animacjaFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#animacja {
position:relative;
height:300px;
width:900px;
border: 6px solid #fff;
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
margin:auto;
overflow:hidden;/*przycinanie zdjęcia do diva*/
}
#animacja img {
position: absolute;
margin: auto;
top: 0;
left: -12px;
right: 0;
bottom: 0;;
}
#animacja img {
-webkit-animation-name: animacjaFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: animacjaFadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: animacjaFadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: animacjaFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#animacja img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#animacja img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#animacja img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#animacja img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
div#animacja div.logo
{
background-repeat:no-repeat;
}