3.9K
CSS animation effects with HTML and CSS
Hello, guys welcome back another tutorial of techmidpoint. If you are searching for CSS animation for your project, now you can find varieties of CSS animation in techmidpoint tutorial. So in this tutorial, I have brought other useful CSS animation effects with HTML and CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS animation</title>
<link rel ="stylesheet" href="style.css">
</head>
<body>
<div class="loader"></div>
</body>
CSS
body{
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
background: rgb(13, 13, 37);
}
.loader{
width: 240px;
height: 50px;
margin: 70px auto 0;
border-radius: 8px;
box-shadow: 0 0 0 7px #42a5f5, inset 0 0 0 1px #42a5f5;
overflow: hidden;
position: relative;
animation: rotate 6s linear infinite;
}
.loader:before{
content: "";
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(29,253,62,1) 50%, rgba(252,176,69,1) 100%);
height: 100%;
position: absolute;
top: 0;
left: 0;
animation: load 6s linear infinite;
}
@keyframes rotate {
0%, 42% { transform: rotate(0deg); }
48%, 92% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
@keyframes load {
0% { width: 0; }
40%, 50% { width: 100%; }
90%, 100% { width: 0; }
}
