Now, We are going to see infinite slider image animation using css. The infinite slider are auto slide image. Very easy to understand this concept using for html and css. See the demo easy to understand. Below see the coding
Code:
<h2>Infinite slider</h2>
<div class="container">
<div id="slider">
<div class='slide first-slide'></div>
<div class='slide second-slide'></div>
<div class='slide third-slide'></div>
</div>
</div>
Css:
body {
background-color: #333;
color: white;
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
padding: 2rem;
margin: 0;
display: flex;
flex-flow: column;
align-items: center;
}
h1 {
font-size: 3rem;
background: -webkit-linear-gradient(180deg, hotpink 30%, lemonchiffon 60%, lightblue 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container {
--width: 300px;
--height: var(--width);
width: var(--width);
overflow: hidden;
}
#slider {
height: var(--height);
width: calc(var(--width)*3);
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-evenly;
}
.slide {
height: var(--height);
width: var(--width);
background-color: lightblue;
}
.slide:nth-child(2) {
background-color: lemonchiffon;
}
.slide:nth-child(3) {
background-color: hotpink;
}
#slider .first-slide {
animation: slide-left-first 10s ease-in-out both infinite;
}
#slider .second-slide {
animation: slide-left-second 10s ease-in-out both infinite;
}
#slider .third-slide {
animation: slide-left-third 10s ease-in-out both infinite;
}
@keyframes slide-left-first {
0% { transform: translateX(0px) }
10% { transform: translateX(0px) }
23% { transform: translateX(0px) }
30% { transform: translateX(calc(var(--width)*-1)) }
31% { transform: translateX(calc(var(--width)*3)) }
60% { transform: translateX(calc(var(--width)*2)) }
90% { transform: translateX(var(--width)) }
100% { transform: translateX(0px) }
}
@keyframes slide-left-second {
0% { transform: translateX(0px) }
23% { transform: translateX(0px) }
30% { transform: translateX(calc(var(--width)*-1)) }
56% { transform: translateX(calc(var(--width)*-1)) }
60% { transform: translateX(calc(var(--width)*-2)) }
61% { transform: translateX(calc(var(--width)*2)) }
90% { transform: translateX(calc(var(--width)*1)) }
100% { transform: translateX(0px) }
}
@keyframes slide-left-third {
0% { transform: translateX(0px) }
23% { transform: translateX(0px) }
30% { transform: translateX(calc(var(--width)*-1)) }
56% { transform: translateX(calc(var(--width)*-1)) }
60% { transform: translateX(calc(var(--width)*-2)) }
90% { transform: translateX(calc(var(--width)*-2)) }
100% { transform: translateX(calc(var(--width)*-3)) }
}
0 Comments