Stoye
February 28, 2023, 9:36am
1
I have a slideshow with CSS like this beneath.
How do i shorten the transition time between 2 pics?
.slideshow li span {
}
.slideshow li:nth-child(1) span {
.slideshow li:nth-child(2) span {
.slideshow li:nth-child(3) span {
and this :@keyframes imageAnimation {
15% {
opacity: 1;
}
30% {
opacity: 0;
}
45% {
opacity: 0;
}
60% {
opacity: 0;
}
75% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Post your entire html and css code here. Use </> button in your editor to enter code properly.
Stoye
February 28, 2023, 1:17pm
3
<html>
<head>
<title>AluToye</title>
<link rel="stylesheet" href="stylehome.css">
<link rel="stylesheet" href="template.css">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<main>
<div class="navbar">
<a href="Referenties.html">Referenties</a>
<div class="dropdown">
<button class="dropbtn"></button><a href="Ons bedrijf.html">Ons bedrijf</a>
</button>
<div class="dropdown-content">
<a href="Productie.html">Productie</a>
<a href="Materialen.html">Materialen</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"></button><a href="Contact.html">Contact</a>
</button>
<div class="dropdown-content">
<a href="Contactformulier.html">Contactformulier</a>
<a href="Offerte.html">Offerte</a>
</div>
</div>
<a href="vacatures.html">Vacatures</a>
</div>
<header>
<logo>
<div class="logo">
<a href="home.html"><img src="images/Alutoye.png" class="logo"></a>
</div>
</logo>
</header>
<ul class="slideshow">
<li>
<span>Slide One</span>
</li>
<li>
<span>Slide Two</span>
</li>
<li>
<span>Slide Three</span>
</li>
<li>
<span>Slide Four</span>
</li>
<li>
<span>Slide Five</span>
</li>
<li>
<span>Slide Fix</span>
</li>
<li>
<span>Slide Seven</span>
</li>
<li>
<span>Slide Eight</span>
</li>
<li>
<span>Slide Nine</span>
</li>
</ul>
<footer class="footer">
<section class="navbarfooter">
<ul>
<li><a href="Glass.html"></a></li>
<li><a href="Aluminium.html"></a></li>
<li><a href="PVC.html"></a></li>
</ul>
</section>
<section class="Icons">
<a href="https://www.schueco.com"><img src="images/Shuco.png" class="shuco"></a>
<a href="https://www.facebook.com/UwSpecialistInRamenEnDeuren"><i class="fa fa-facebook"></i></a>
<a target="_top" href="mailto:info@alutoye.be"><i class="fa fa-envelope"></i></a>
</section>
</footer>
/* LOGO */
.logo {
width: 200px;
top: 10%;
left: 5%;
cursor: pointer;
position: absolute;
z-index: 1;
}
.footer .shuco {
width: 5cm;
height: 3cm;
bottom: 1cm;
filter: brightness(0) invert(1);
text-align: center;
position: fixed;
left: 50%;
transform: translate(-50%, 0)
}
.slideshow {
list-style: none;
z-index: 1;
}
.slideshow li span {
width: 100%;
height: 89.5%;
position: absolute;
top: 1.5cm;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity:0;
z-index: 0;
-webkit-backface-visibility: visible;
backface-visibility: visible;
animation: imageAnimation 48s linear infinite 0s;
-webkit-animation: imageAnimation 48s linear infinite 0s;
-moz-animation: imageAnimation 48s linear infinite 0s;
animation-iteration-count:infinite;
}
@media only screen and (min-width: 768px) {
.slideshow li a h3 {
bottom: 30px;
font-weight: 0px;
color: white;
}
}
@media only screen and (min-width: 1024px) {
.slideshow li a h3 {
font-size: 2em;
}
}
.slideshow li:nth-child(1) span {
background-image: url(pictures/Top10/2.jpeg);
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0;
}
.slideshow li:nth-child(2) span {
background-image: url(pictures/Top10/3.jpeg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6;
}
.slideshow li:nth-child(3) span {
background-image: url(pictures/Top10/4.jpeg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url(pictures/Top10/5.jpeg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
background-image: url(pictures/Top10/6.jpeg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
animation-delay: 24s;
}
.slideshow li:nth-child(6) span {
background-image: url(pictures/Top10/7.jpeg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
animation-delay: 30s;
}
.slideshow li:nth-child(7) span {
background-image: url(pictures/Top10/8.jpeg);
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
animation-delay: 36s;
}
.slideshow li:nth-child(8) span {
background-image: url(pictures/Top10/9.jpeg);
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
animation-delay: 42s;
}
.slideshow li:nth-child(9) span {
background-image: url(pictures/Top10/9.jpeg);
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
animation-delay: 48s;
}
@keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
}
10% {
opacity: 1;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
}
10% {
opacity: 1;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
}
10% {
opacity: 1;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.no-cssanimations .slideshow li span {
opacity: 1;
}