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
Recommend
foreman ubuntu16 quick installation
Quickstart Guide The Foreman installer is a colle...
The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked
Three functions: 1. Automatic vertical centering o...
MySQL statement to get all dates or months in a specified time period (without setting stored procedures or adding tables)
mysql gets all dates or months in a time period 1...
Vue implements the digital thousands separator format globally
This article example shares the specific code for...
Detailed explanation of the top ten commonly used string functions in MySQL
Hello everyone! I am Mr. Tony who only talks abou...
MySQL 8.0.18 installation and configuration graphic tutorial
Learning objectives: Learn to use Windows system ...
Html Select option How to make the default selection
Adding the attribute selected = "selected&quo...
Solution to ERROR 1366 when entering Chinese in MySQL
The following error occurs when entering Chinese ...
How to modify iTunes backup path under Windows
0. Preparation: • Close iTunes • Kill the service...
Implementing simple tabs with js
Tab selection cards are used very frequently on r...
Mysql date formatting and complex date range query
Table of contents Preface Query usage scenario ca...
MySQL 8.0.16 compressed package installation and configuration method graphic tutorial
This article shares the installation and configur...
Vue+Websocket simply implements the chat function
This article shares the specific code of Vue+Webs...
js to realize the mouse following game
This article shares the specific code of js to im...
SMS verification code login function based on antd pro (process analysis)
Table of contents summary Overall process front e...