This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
nth-of-type vs nth-child
(7 answers)
Closed 3 years ago.
I am using a CSS grid for positioning elements and having a fadeIn effect. But after placing text, below the images and using :nth-child() CSS property to select each h4 tag, Leads to 4th and 5th images not getting displayed(as their opacity is not changed). I guess, nth-child selects 1st 5 elements in the grid, irrespective of whether it is h4 or not.
Kindly suggest where I am wrong.
Here's a link to JSFiddle:- https://jsfiddle.net/aew2tjhr/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
<style>
.container {
margin-top: 500px;
}
.working-process {
background-color: #000;
}
.working-process h2 {
color: #fff;
margin-bottom: 4rem;
}
.emphasize {
color: #ff7810;
}
.single-work {
display: grid;
grid-template-columns: repeat(5, 200px);
grid-template-rows: 150px;
grid-auto-rows: 150px;
justify-content: center;
}
.single-work h4 {
color: #000;
grid-row: 2/3;
}
.single-work-icon {
position: relative;
height: 120px;
width: 120px;
border: 1px solid #ff7810;
background-color: #e49152;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-basis: 120px;
margin-right: 4rem;
}
.single-work-icon:not(:nth-child(5))::after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
border-right: 70px solid #fff;
width: 70px;
height: 2px;
}
.single-work,
.single-work>.single-work-icon {
opacity: 0;
}
.single-work.show {
animation: showWorks 1s ease-in-out 0.5s forwards;
}
.single-work.show>.single-work-icon:nth-child(1) {
animation: showWorks 1s ease-in-out 0.5s forwards;
}
.single-work.show>.single-work-icon:nth-child(2) {
animation: showWorks 1s ease-in-out 1.5s forwards;
}
.single-work.show>.single-work-icon:nth-child(3) {
animation: showWorks 1s ease-in-out 2.5s forwards;
}
.single-work.show>.single-work-icon:nth-child(4) {
animation: showWorks 1s ease-in-out 3.5s forwards;
}
.single-work.show>.single-work-icon:nth-child(5) {
animation: showWorks 1s ease-in-out 4.5s forwards;
}
.single-work.show .single-work-icon:nth-child(1)::after {
animation: slideInRight 2s ease-in-out 0s forwards;
}
.single-work.show .single-work-icon:nth-child(2)::after {
animation: slideInRight 1s ease-in-out 2s forwards;
}
.single-work.show .single-work-icon:nth-child(3)::after {
animation: slideInRight 1s ease-in-out 3s forwards;
}
.single-work.show .single-work-icon:nth-child(4)::after {
animation: slideInRight 1s ease-in-out 4s forwards;
}
#keyframes showWorks {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes showArrows {
0% {
opacity: 0;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(100%);
}
}
#keyframes slideInRight {
0% {
left: 50%;
}
100% {
left: 100%;
}
}
</style>
</head>
<body>
<section class="pos-r working-process">
<div class="container">
<h2 class="text-center">How <span class="emphasize">Digital Marketing Agency</span> work</h2>
<div class="row">
<div class="col-lg-12 col-md-12 ml-auto md-mt-5">
<div class="single-work">
<div class="single-work-icon">
<img src="img/working_process/research.png" alt="Research" />
</div>
<h4>Research</h4>
<div class="single-work-icon">
<img src="img/working_process/design.png" alt="Design" />
</div>
<h4>Design</h4>
<div class="single-work-icon">
<img src="img/working_process/Implement.png" alt="Implement" />
</div>
<h4>Implement</h4>
<div class="single-work-icon">
<img src="img/working_process/measure.png" alt="Measure" />
</div>
<h4>Measure</h4>
<div class="single-work-icon">
<img src="img/working_process/result.png" alt="Result" />
</div>
<h4>Result</h4>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
function isInViewport(element) {
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// console.log(elementTop, elementBottom, viewportTop, viewportBottom);
return elementBottom > viewportTop && elementTop < viewportBottom;
}
$(window).on("resize scroll", function () {
if (isInViewport(document.querySelector(".working-process"))) {
document.querySelector(".single-work").classList.add("show");
} else {
if (
document.querySelector(".single-work").classList.contains("show")
) {
document.querySelector(".single-work").classList.remove("show");
}
}
});
</script>
</body>
</html>
Related
So recently I had my exams and unfortunately failed because of CSS animation. One of the tasks was to make CSS animation with the squares.
I can't remember the exact question and task but it was like this:
Make three squares and let the first one go for 2 seconds to the right
Wait for the second square to do the same thing, without returning back.
The third one should do the same thing
After the third square touches the right side, they all should go back to the first place.
Does anyone have an idea how I can make squares to go back to the first place?
.row {
margin-bottom: 10px;
}
.row div {
display: inline-block;
padding: 50px;
background-color: red;
position: relative;
}
#first {
animation: first 2s linear forwards 0ms,
back 2s linear alternate 5s;
}
#second {
animation: first 2s linear forwards 2s;
}
#third {
animation: first 2s linear forwards 4s;
}
#keyframes first {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes back {
0% {
right: 0%;
}
100% {
right: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation testing</title>
</head>
<body>
<div class="row">
<div id="first"></div>
</div>
<div class="row">
<div id="second"></div>
</div>
<div class="row">
<div id="third"></div>
</div>
</body>
</html>
Interesting task. Today I learned something. Actually my first animation ever :)
To move the squares to the right:
I have used your existing and already correctly working first, second, and third keyframes with the same timings.
The first starts at 0s and takes 2 seconds, the second starts after two seconds and takes two seconds, so the third after 4 seconds.
To return the squares:
I have defined another back keyframe.
To start the back keyframe, I have added back 2s linear forwards 6s to all elements as a second animation.
The second animation takes 2 seconds and starts after 6 seconds when all others are finished (3 * 2 seconds each).
Note: You could also reverse the positions in the back keyframe and use one of the alternatives to forwards instead, see https://www.w3schools.com/css/css3_animations.asp.
.row {
margin-bottom: 10px;
}
.row div {
display: inline-block;
padding: 50px;
background-color: red;
position: relative;
}
#first {
animation: first 2s linear forwards 0s,
back 2s linear forwards 6s;
}
#second {
animation: second 2s linear forwards 2s,
back 2s linear forwards 6s;
}
#third {
animation: third 2s linear forwards 4s,
back 2s linear forwards 6s;
}
#keyframes first {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes second{
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes third{
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes back{
0% {
left: 100%;
}
100% {
left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation testing</title>
</head>
<body>
<div class="row">
<div id="first"></div>
</div>
<div class="row">
<div id="second"></div>
</div>
<div class="row">
<div id="third"></div>
</div>
</body>
</html>
Try this, it may work.
.move-me {
display: inline-block;
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8s steps(4) infinite;
}
.move-me-2 {
animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
animation: move-in-steps 8s infinite;
}
body {
padding: 20px;
}
#keyframes move-in-steps {
0% {
left: 0;
background: blue;
}
100% {
left: 100%;
background: red;
}
}
<div class="move-me move-me-1">steps(4, end)</div>
<br>
<div class="move-me move-me-2">steps(4, start)</div>
<br>
<div class="move-me move-me-3">no steps</div>
I need to display a text for limited time and thereafter another text in the same place and so on, No Moving just Appearance and Disappearance of all timely texts.
<!DOCTYPE html><html><head>
<style>
/* Safari 4.0 - 8.0 */#-webkit-keyframes example {from {background-color:
red;}to {background-color: yellow;}}
/* Standard syntax */#keyframes example {from {}to {background-color:
yellow;}}
</style></head>
<body>
<div style="width: 300px;
height: 300px;
background-color: black;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;">1st Text</div>
<script>
var i=1;
while(i<7){document.write("d");i++;}
</script>
</body></html>
I include a live sample that i think does what you need.
'use strict';
window.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
var wrapper = document.getElementById('wrapper');
if (typeof wrapper.classList !== 'undefined') {
wrapper.classList.add('slide-items');
}
else {
var curentclass = wrapper.className;
currentclass += ' slide-items';
wrapper.className = currentclass;
}
}, 2000);
});
.wrapper {
position: relative;
overflow: hidden;
}
.wrapper > p {
padding: 12px 7px;
background-color: #ddd;
color: #000;
position: relative;
transition-timing-function: ease;
transition-duration: 0.6s;
opacity: 0;
}
.delay1 {
transition-delay: 0.6s;
}
.delay2 {
transition-delay: 1.2s;
}
.delay3 {
transition-delay: 1.8s;
}
.delay4 {
transition-delay: 1.2s;
}
.wrapper.slide-items-in-from-bottom > p {
-ms-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.wrapper.slide-items > p {
opacity: 1;
-ms-transform: none;
-webkit-transform: none;
transform: none;
}
<div class="wrapper slide-items-in-from-bottom" id="wrapper">
<p>This is paragraph one</p>
<p class="delay1">This is paragraph two</p>
<p class="delay2">this is paragraph three</p>
<p class="delay3">this is paragraph four</p>
</div>
I am currently learning HTML/CSS3 basics and I came to the transition/animation chapter. To test my understanding of the subject I threw myself a challenge : create a loading page made out of CSS-only animation.
The charging bar is made of 5 white rectangles with red borders, that go red every 0,1 to show that it is charging, and at the end of the loop go blanck again and repeat.
So I first tried to create an animation white first rectangle's background-color changed to red at 20% of the 0,5s animation and so on...
It failed, because I have no clue of how to change multiple element within the same animation.
Then I figured that it would be easier to make each rectangle from state "blanck" to state "red" even though it takes a lot more lines of code.
Only problem, as you can see with my code below, the first rectangle doesn't go red whereas the others do, and I can make it go backward at the end.
Could anyone give me a clue about how to make this transition works, then give me a hint/documentation about how to make it works with an animation ?
<!DOCTYPE html>
<html>
<head>
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="loading.css">
</head>
<body>
<div class="big_div">
<div id="title"> <p class="main_title"> L O A D I N G</p> </div>
<div class="carre" id="premiers_carre"></div>
<div class="carre" id="deuxieme_carre"></div>
<div class="carre" id="troisieme_carre"></div>
<div class="carre" id="quatrieme_carre"></div>
<div class="carre" id="cinquieme_carre"></div>
</div>
</body>
</html>
p
{
font-family: "Press start 2P";
}
#title {
position: absolute;
left : 530px;
top : 280px ;
}
.big_div
{
width: 1250px;
height: 700px;
display :flex;
flex-direction : row;
justify-content: center;
align-items: center;
}
.carre
{
background-color: white;
border: 1px red solid;
width: 80px;
height: 10px;
margin-right: 5px;
}
#premier_carre
{
transition-property: background-color;
transition-delay: 0.1s;
}
#deuxieme_carre
{
transition-property: background-color;
transition-delay: 0.2s;
}
#troisieme_carre
{
transition-property: background-color;
transition-delay: 0.3s;
}
#quatrieme_carre
{
transition-property: background-color;
transition-delay: 0.4s;
}
#cinquieme_carre
{
transition-property: background-color;
transition-delay: 0.5s;
}
.big_div:hover #premier_carre
{
background-color: red;
}
.big_div:hover #deuxieme_carre
{
background-color: red;
}
.big_div:hover #troisieme_carre
{
background-color: red;
}
.big_div:hover #quatrieme_carre
{
background-color: red;
}
.big_div:hover #cinquieme_carre
{
background-color: red;
}
Bonjour ! You wrote id="premiers_carre" in your code and #premier_carre in your CSS. Simple as that.
Here is your code fixed and improved for a more DRY approach (you defined a class, so why not use it?):
p
{
font-family: "Press start 2P";
}
#title {
position: absolute;
left : 530px;
top : 280px ;
}
.big_div
{
width: 1250px;
height: 700px;
display :flex;
flex-direction : row;
justify-content: center;
align-items: center;
}
.carre
{
background-color: white;
border: 1px red solid;
width: 80px;
height: 10px;
margin-right: 5px;
transition-property: background-color;
}
#premier_carre
{
transition-delay: 0.1s;
}
#deuxieme_carre
{
transition-delay: 0.2s;
}
#troisieme_carre
{
transition-delay: 0.3s;
}
#quatrieme_carre
{
transition-delay: 0.4s;
}
#cinquieme_carre
{
transition-delay: 0.5s;
}
.big_div:hover .carre
{
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="loading.css">
</head>
<body>
<div class="big_div">
<div id="title"> <p class="main_title"> L O A D I N G</p> </div>
<div class="carre" id="premier_carre"></div>
<div class="carre" id="deuxieme_carre"></div>
<div class="carre" id="troisieme_carre"></div>
<div class="carre" id="quatrieme_carre"></div>
<div class="carre" id="cinquieme_carre"></div>
</div>
</body>
</html>
Well, this is what I have so far for your question:
<!DOCTYPE html>
<html>
<head>
<link rel="fluid-icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Light_Blue_Circle.svg/1200px-Light_Blue_Circle.svg.png" title="HTML">
<link rel="mask-icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Light_Blue_Circle.svg/1200px-Light_Blue_Circle.svg.png" color="#0096ff">
<link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Light_Blue_Circle.svg/1200px-Light_Blue_Circle.svg.png">
<link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Light_Blue_Circle.svg/1200px-Light_Blue_Circle.svg.png"><style>#splash {
position: absolute; width: 100%; height: 100%; top: 0; left: 0;
display: flex; align-items: center; justify-content: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #keyframes loadingColorChange;
}
.tw-loaded #splash, #splash-content { display: none; }
#splash[splash-theme="dark"] { background-color: #303030; color: #303030; }
#splash-spinner:after {
content: " "; display: block; width: 64px; height: 64px;
border-radius: 50%; border: 6px solid; border-color: currentColor transparent currentColor transparent;
animation: splash-spinner 1s linear infinite;
}
#keyframes splash-spinner {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
body {
animation-name: bgColorChange;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: none;
animation-name: loadingColorChange;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: none;
}
#keyframes bgColorChange {
0% { background-color: #ea4335; }
12.5% { background-color: #fbbc05; }
25% { background-color: #34a853; }
37.5% { background-color: #4285f4; }
50% { background-color: #34a853; }
62.5% { background-color: #fbbc05; }
75% { background-color: #fbbc05; }
100% { background-color: #ea4335; }
}
#keyframes loadingColorChange {
0% { color: #4285f4; }
12.5% { color: #34a853; }
25% { color: #fbbc05; }
37.5% { color: #ea4335; }
50% { color: #fbbc05; }
62.5% { color: #34a853; }
100% { color: #4285f4; }
}
</style><link rel="dns-prefetch" href="https://trampoline.turbowarp.org/"><link rel="dns-prefetch" href="https://projects.scratch.mit.edu/"><link rel="dns-prefetch" href="https://assets.scratch.mit.edu/"></head><body><div id="splash" aria-hidden="true"><div id="splash-content"><div id="splash-spinner"></div></div></div><script>(function() {
document.querySelector('#splash-content').style.display = 'block';
try {var localTheme = localStorage.getItem('tw:theme');} catch (e) {}
if (localTheme ? localTheme === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches) document.querySelector('#splash').setAttribute('splash-theme', 'dark');
})();</script><div id="app">Loading...</div><script src="https://turbowarp.org/js/vendors~addon-settings~credits~editor~embed~fullscreen~player.57d02a22479dd55504bc.js"></script><script src="https://turbowarp.org/js/vendors~editor~embed~fullscreen~player.2ebfbf3346f8d17ad60d.js"></script><script src="https://turbowarp.org/js/addon-settings~addons~editor~fullscreen~player.976423b27ac04efde22e.js"></script><script src="https://turbowarp.org/js/editor~embed~fullscreen~player.d227a5ae0c7b2012a7a2.js"></script><script src="https://turbowarp.org/js/player.1fd251802eabb68ba5fe.js"></script></body>
</body>
</html>
Also all credit to Github
This is a uni project, I have three CD images that spin and play a song on mousehover but I want to change the background image too. I have managed to do that but when I hover off the cd image the background and song continues to play. If I put my mouse on the nav bar it will go back to the normal background. I would like to revert background to original after the cursor leaves the cd. I am new to this so a dumbed down explanation would be appreciated.
<head>
<title>Learning HTML</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="main.js"></script>
</head>
<body id="bg">
<div id="imagesMain">
<div class="imagesMain__item" onmouseover="PlaySound('mySound')"
onmouseout="StopSound('mySound')">
<div class="imagesMain__item__bg" style="background-image: url(images/bg1.png)"></div>
<img id="album1" src="images/album1.png" />
</div>
<div class="imagesMain__item" onmouseover="PlaySound('smallThings')"
onmouseout="StopSound('smallThings')">
<div class="imagesMain__item__bg" style="background-image: url(images/bg2.png)"></div>
<img id="album2" src="images/album2.png" />
</div>
<div class="imagesMain__item" onmouseover="PlaySound('firstDate')"
onmouseout="StopSound('firstDate')">
<div class="imagesMain__item__bg" style="background-image: url(images/bg1.png)"></div>
<img id="album3" src="images/album3.png" />
</div>
<audio id='mySound' src='sounds/blink182-%5BAudioTrimmer.com%5D.mp3'/>
<audio id='smallThings' src='sounds/blink-182%20-%20All%20The%20Small%20Things-%5BAudioTrimmer.com%5D.mp3'/>
<audio id='firstDate' src='sounds/blink-182%20-%20First%20Date-%5BAudioTrimmer.com%5D.mp3'/>
</body>
CSS is as follows:
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 300px;
text-align: center;
}
.imagesMain__item {
display: inline-block;
height: 300px;
position: relative;
width: 300px;
}
.imagesMain__item img {
cursor: pointer;
display: block;
height: 100%;
position: relative;
width: 100%;
z-index: 100;
}
.imagesMain__item__bg {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
bottom: 0;
left: 0;
opacity: 0;
position: fixed;
transition: all ease-in-out 0.1s;
transform: scale(0);
right: 0;
top: 0;
}
.imagesMain__item:hover img {
animation-name: rotate;
animation-duration: 0.8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.imagesMain__item:hover .imagesMain__item__bg {
opacity: 1;
transform: scale(1);
}
#keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
html {
height: 100%;
}
body {
background-image: url(images/bg.png);
background-size: cover;
background-repeat: no-repeat;
}
Change your html setup: change the occurence of the image and the bg-container.
<div class="imagesMain__item">
<img id="album1" src="http://www.clker.com/cliparts/d/6/9/a/11970932001393807721BenBois_Vinyl_records.svg.hi.png" />
<div class="imagesMain__item__bg" style="background-image: url(https://lastfm-img2.akamaized.net/i/u/ar0/7ae6e40453913321b8badf504f192e16)"></div>
</div>
Now set the hover handler on the rotation item and not on the whole item container.
.imagesMain__item > img:hover {
animation-name: rotate;
animation-duration: 0.8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.imagesMain__item > img:hover + .imagesMain__item__bg {
opacity: 1;
transform: scale(1);
}
You can see it here in action: fiddle
I have a slideshow where pictures crossfade automatically in a loop. It is set so that 3 pictures are scrolling.
Demo in Codepen (http://codepen.io/lopis/pen/VYRoKE)
<section class="crossfade">
<article class="slide">
<img src="http://lorempixel.com/400/200/people" alt="" />
</article>
<article class="slide">
<img src="http://lorempixel.com/400/200/cats" alt="" />
</article>
<article class="slide">
<img src="http://lorempixel.com/400/200/sports" alt="" />
</article>
</section>
The CSS:
$slideDuration: 4; // seconds
$slideNum: 3;
#mixin loop($name, $duration, $delay) {
-webkit-animation: $name #{$duration}s #{$delay}s infinite;
-moz-animation: $name #{$duration}s #{$delay}s infinite;
animation: $name #{$duration}s #{$delay}s infinite;
}
#mixin slide() {
#for $i from 1 through $slideNum {
.slide:nth-child( #{$i} ) {
#include loop( crossfade, ($slideNum * $slideDuration), (($i - 1) * $slideDuration) );
}
}
}
#mixin keyframes() {
#-webkit-keyframes crossfade {
0% {
opacity:1;
}
25% {
opacity:1;
}
33% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes crossfade {
0% {
opacity:1;
}
25% {
opacity:1;
}
33% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}
}
.crossfade {
position: relative;
}
.slide {
position: absolute;
top: 0;
}
.slide:first-child {
position: static;
}
#include slide();
#include keyframes();
Is there a way to make an animation like this that would work with any number of slides using just CSS?
Edit: I understand that such dynamism is not intended in CSS but you can have some dynamic content, like by using calc(), etc.
Some libraries, as the one suggested in the comments, allow the use of mixins for this task. This is not what I'm looking for as it requires a rebuild of the source.
You can get this using only CSS, using a content responsive technique
Let's set a time for each slide of 2 seconds.
We need to set a staggered delay for every nth child of 2 seconds. That is easily acieved with nth-child.
Now, we need to increase the duration of the transition depending on the number of elements. Using this technique we achieve this easily.
The third issue is managing the fade-out. In the standard approach, that would involve changing the keyframes changing point, and it would be cumbersome. The trick to get this working with much less code, is to make a z-index movement in the animation itself. The elements are moving backward, and then we don't care about their opacity anymore
Example set only for 3 posible number of elements:
.container {
width: 100px;
height: 50px;
position: relative;
margin: 10px;
display: inline-block;
}
.element {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation: anim 6s infinite;
}
.element:nth-child(1) {
background-color: lightyellow;
animation-delay: 0s;
}
.element:nth-child(2) {
background-color: lightgreen;
animation-delay: 2s;
}
.element:nth-child(3) {
background-color: pink;
animation-delay: 4s;
}
.element:nth-child(4) {
background-color: lightblue;
animation-delay: 6s;
}
.element:nth-child(5) {
background-color: coral;
animation-delay: 8s;
}
.element:nth-child(6) {
background-color: aliceblue;
animation-delay: 10s;
}
.element:nth-child(7) {
background-color: burlywood;
animation-delay: 12s;
}
.element:nth-child(8) {
background-color: bisque;
animation-delay: 14s;
}
.element:nth-child(9) {
background-color: beige;
animation-delay: 16s;
}
.element:nth-last-child(3):first-child,
.element:nth-last-child(3):first-child ~ .element {
animation-duration: 6s;
}
.element:nth-last-child(6):first-child,
.element:nth-last-child(6):first-child ~ .element {
animation-duration: 12s;
}
.element:nth-last-child(9):first-child,
.element:nth-last-child(9):first-child ~ .element {
animation-duration: 18s;
}
#keyframes anim {
0% { opacity: 0; z-index: 100;}
15% { opacity: 1;}
50% { opacity: 1;}
100% { opacity: 0; z-index: 1;}
}
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
</div>
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
<div class="element">FOUR</div>
<div class="element">FIVE</div>
<div class="element">SIX</div>
</div>
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
<div class="element">FOUR</div>
<div class="element">FIVE</div>
<div class="element">SIX</div>
<div class="element">SEVEN</div>
<div class="element">EIGHT</div>
<div class="element">NINE</div>
</div>