html css cross fade timer

Question

html css cross fade timer

790 views Asked by Paolo Duhaylungsod At 25 November 2024 at 12:41

i have this simple web page and what i want to do is to fade in the first pic for 5 seconds then change it to picture # 2 for 5 seconds as well. here is my code:

<!DOCTYPE html>
<html>
<style>
#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

  @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 30s;
animation-duration: 10s;
animation-direction: alternate;
}
}
</style>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="fade.css">
    <title>Wideout</title>
</head>
<body>

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/seMwpP0yeu4" 
frameborder="0" allowfullscreen></iframe>

<div id="cf">
  <img class="bottom" src="images/1.jpg" height="100" />
  <img class="top" src="images/2.jpg" height="100" />
</div>

</body>
</html>

i do believe my problem is with the percentage part. can someon help me out? much appreciated

Original Q&A

There are 1 answers

**Nameismy** · Answer 1 · 2015-08-24 09:17:25

This can be done just using CSS3

#crossfade > img { 
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s; 
}

#crossfade > img:nth-child(2)  {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s; 
}

@-webkit-keyframes imageAnimation { 
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
     -webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
} 

@-moz-keyframes imageAnimation { 
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
     -moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
     -o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
     -ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

@keyframes imageAnimation { 
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
     animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }

}

Check

Here's a JSFiddle

TechQA.

html css cross fade timer

There are 1 answers

Related Questions in HTML

Related Questions in CROSS-FADE

Popular Questions

Popular Tags

Trending Questions