Pure CSS3 realizes the effect of div entering and exiting in order

This article mainly introduces the effect of div entering and exiting in sequence using pure CSS3. It has a certain reference value. If you are interested, you can learn more about it.

Effect:

source code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				margin-top: 10px;
				height: 50px;
				background-color: #FF0000;
				opacity: 0.6;
			}
			
			.a{
				animation: aa 2s linear 100ms infinite;
			}
			.b{
				animation: bb 2s linear infinite
			}
			.c{
				animation: cc 2s linear infinite
			}
			.d{
				animation:dd 2s linear infinite
			}
			
			@keyframes aa{
				0%{width: 0;}
				25%{width:200px;}
				50%{width:200px;}
				75%{width:200px;}
				100%{width:200px;}
			}
			@keyframes bb{
				0%{width: 0;}
				25%{width:0px;}
				50%{width:200px;}
				75%{width:200px;}
				100%{width:200px;}
			}
			@keyframes cc{
				0%{width: 0;}
				25%{width:0px;}
				50%{width:0px;}
				75%{width:200px;}
				100%{width:200px;}
			}
			@keyframes dd{
				0%{width: 0;}
				25%{width:0px;}
				50%{width:0px;}
				75%{width:0px;}
				100%{width:200px;}
			}
			
		</style>
	</head>
	<body>
		<div class="a">
			
		</div>
		<div class="b">
			
		</div>
		<div class="c">
			
		</div>
		<div class="d">
			
		</div>
	</body>
</html>

This is the end of this article about how to use pure CSS3 to achieve the effect of divs entering and exiting in sequence. For more relevant content about CSS3 divs entering and exiting in sequence, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: HTML+CSS to achieve charging water drop fusion special effects code

>>: HTML+CSS to achieve responsive card hover effect