CSS Animation using HTML and CSS
**CSS Animation Benefits:**
1. **Enhanced User Experience:**
- CSS animations make websites more engaging and visually appealing, enhancing the overall user experience.
2. **Reduced JavaScript Dependency:**
- CSS animations can replace some JavaScript-based animations, reducing the need for additional scripting.
3. **Smoother Transitions:**
- Animations provide smooth transitions between different states of web elements, improving the flow of information.
4. **Lightweight and Efficient:**
- CSS animations are typically more lightweight and efficient than JavaScript animations, leading to faster page loading times.
5. **Hardware Acceleration:**
- Many modern browsers support hardware acceleration for CSS animations, making them even smoother and more performant.
6. **Cross-Browser Compatibility:**
- CSS animations are widely supported across different browsers, reducing compatibility issues.
7. **Responsive Design:**
- CSS animations can be easily integrated into responsive web design, ensuring animations adapt to various screen sizes.
8. **Customization and Control:**
- Developers have fine-grained control over animations, allowing for custom timing, easing, and keyframe definitions.
9. **Reuse and Maintainability:**
- Animations can be defined once and applied to multiple elements, promoting code reusability and easier maintenance.
10. **SEO-Friendly:**
- CSS animations do not hinder search engine optimization (SEO) efforts, as search engines can still index content effectively.
11. **Interactive Elements:**
- CSS animations can be triggered by user interactions, creating interactive and dynamic web applications.
12. **Wide Range of Effects:**
- Developers can create various effects, such as fading, sliding, rotating, and scaling elements, to suit their design needs.
13. **Accessibility Considerations:**
- When implemented with care, CSS animations can be made accessible to users with disabilities, improving inclusivity.
14. **Community Resources:**
- There are numerous online resources, tutorials, and libraries available to help developers learn and implement CSS animations effectively.
15. **Performance Optimization:**
- CSS animations can be optimized for performance by minimizing repaints and reflows, leading to a smoother user experience.
Incorporating CSS animations into your web projects can greatly enhance their visual appeal, user engagement, and overall user experience while maintaining efficiency and cross-browser compatibility.
file - index.html
<!DOCTYPE html>
<!-- Coding By codinglabsolution- codinglabsolution.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="style.css">
<!-- ===== Boxicons CSS ===== -->
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<title>Only Css Animation in HTML CSS </title>
</head>
<body>
<div class="animation01">
<div class="rhombus_small">
<div class="rhombus">
<div class="border_box">
<span class="line line01"></span>
<span class="line line02"></span>
<span class="line line03"></span>
<span class="line line04"></span>
<span class="circle circle01"></span>
<span class="circle circle02"></span>
<span class="circle circle03"></span>
<span class="circle circle04"></span>
<span class="animation_line animation_line01"></span>
<span class="animation_line_wrapper animation_line02_wrapper"><span class="animation_line animation_line02"></span></span>
<span class="animation_line animation_line03"></span>
<span class="animation_line_wrapper animation_line04_wrapper"><span class="animation_line animation_line04"></span></span>
<span class="animation_line animation_line05"></span>
<span class="animation_line_wrapper animation_line06_wrapper"><span class="animation_line animation_line06"></span></span>
<span class="animation_line animation_line07"></span>
<span class="animation_line_wrapper animation_line08_wrapper"><span class="animation_line animation_line08"></span></span>
</div>
<div class="wave">
<div class="wave_wrapper"><div class="wave_box"></div></div>
</div>
</div>
</div>
</div>
<div class="animation02">
<div class="rhombus_box">
<span class="rhombus_item_wrapper rhombus_item01_wrapper"><span class="rhombus_item"></span></span>
<span class="rhombus_item_wrapper rhombus_item02_wrapper"><span class="rhombus_item"></span></span>
</div>
<div class="double_content">
<div class="double_wrapper02 dotted02"><div class="dotted_hide"><div class="double_wrapper01 dotted01"><span class="dotted_right"></span></div></div></div>
<div class="double_wrapper02 white02"><div class="double_wrapper01 white01"></div></div>
<div class="double_wrapper02 gray02"><div class="double_wrapper01 gray01"></div></div>
<div class="double_wrapper02 orange02"><div class="double_wrapper01 orange01"></div></div>
</div>
<div class="name">
<p>KURI-CHAN</p>
<span class="name_circle01"></span>
<span class="name_circle02"></span>
</div>
</div>
</body>
</html>
/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
/*=================
Basic style
==================*/
html, body{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #212022;
}
body{
margin: 0;
}
img{
vertical-align:bottom;
max-width:100%;
width: 100%;
}
h1,h2,p{
margin: 0;
}
/*===================
animation01
====================*/
.animation01{
position: absolute;
width: 100%;
height: 100%;
}
.border_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15vw;
height: 15vw;
}
.line{
display: block;
position: absolute;
right: 0;
bottom: 0;
background-color: #845b46;
opacity: 0;
}
.line01{
top: 0;
left: 100%;
width: 0.15vw;
height: 15.15vw;
transform-origin: bottom;
animation: animation01_line01 0.2s linear 0.3s forwards;
}
.line03{
top: 0;
left: 0;
width: 0.15vw;
height: 15.15vw;
transform-origin: bottom;
animation: animation01_line01 0.2s linear 0.6s forwards;
}
@keyframes animation01_line01{
0%{
transform: scale3d(1,0,1);
opacity: 1;
}
100%{
transform: scale3d(1,1,1);
opacity: 1;
}
}
.line02{
top: 100%;
left: 0;
width: 15.15vw;
height: 0.15vw;
transform-origin: right;
animation: animation01_line02 0.2s linear 0.4s forwards;
}
.line04{
top: 0;
left: 0;
width: 15.15vw;
height: 0.15vw;
transform-origin: left;
animation: animation01_line02 0.2s linear 0.8s forwards;
}
@keyframes animation01_line02{
0%{
transform: scale3d(0,1,1);
opacity: 1;
}
100%{
transform: scale3d(1,1,1);
opacity: 1;
}
}
.circle{
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 1.2vw;
height: 1.2vw;
border: 0.1vw solid #fff;
border-radius: 50%;
opacity: 0;
}
.circle01{
top: 96%;
left: 96%;
margin: 0 auto;
animation: animation01_circle 0.3s linear 0.3s forwards;
}
.circle02{
top: 96%;
left: -99%;
margin: 0 auto;
animation: animation01_circle 0.3s linear 0.45s forwards;
}
.circle03{
top: -4%;
left: -99%;
margin: 0 auto;
animation: animation01_circle 0.3s linear 0.65s forwards;
}
.circle04{
top: -4%;
left: 96%;
margin: 0 auto;
animation: animation01_circle 0.3s linear 0.85s forwards;
}
@keyframes animation01_circle{
0%{
transform: scale3d(0,0,1);
opacity: 1;
}
40%{
transform: scale3d(1,1,1);
opacity: 1;
}
60%{
transform: scale3d(1,1,1);
opacity: 1;
}
100%{
transform: scale3d(0,0,1);
opacity: 1;
}
}
.wave{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 13.5vw;
height: 13.5vw;
overflow: hidden;
}
.wave_wrapper{
width: 200%;
height: 150%;
position: absolute;
top: -25%;
right: 0;
bottom: 0;
left: -50%;
margin: 0 auto;
animation: animation01_wave_wrapper 1s linear 1s forwards;
}
@keyframes animation01_wave_wrapper{
0%{
transform: rotate(0);
}
25%{
transform: rotate(15deg);
}
50%{
transform: rotate(0);
}
75%{
transform: rotate(-15deg);
}
100%{
transform: rotate(0);
}
}
.wave_box{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #fff;
transform-origin: bottom;
animation: animation01_wave_box 1s linear 1s forwards;
opacity: 0;
}
@keyframes animation01_wave_box{
0%{
transform: scale3d(1,0,1);
opacity: 1;
}
100%{
transform: scale3d(1,1,1);
opacity: 1;
}
}
.animation_line{
position: absolute;
right: 0;
bottom: 0;
margin: 0 auto;
background-color: #fff;
opacity: 0;
}
.animation_line_wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0 auto;
width: 100%;
height: 100%;
}
.animation_line01{
top: -15%;
left: 0;
width: 0.2vw;
height: 0.7vw;
animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
transform-origin: top;
}
.animation_line02_wrapper{
transform: rotate(45deg)
}
.animation_line02{
top: -35%;
left: 0;
width: 0.2vw;
height: 0.7vw;
animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
transform-origin: top;
}
@keyframes animation_line01{
0%{
transform: translateY(0);
opacity: 1;
}
100%{
transform: translateY(-1.5vw);
opacity: 1;
}
}
.animation_line03{
top: 50%;
left: 110%;
width: 0.7vw;
height: 0.2vw;
animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
transform-origin: right;
}
.animation_line04_wrapper{
transform: rotate(45deg)
}
.animation_line04{
top: 50%;
left: 128%;
width: 0.7vw;
height: 0.2vw;
animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
transform-origin: right;
}
@keyframes animation_line03{
0%{
transform: translateX(0);
opacity: 1;
}
100%{
transform: translateX(1.5vw);
opacity: 1;
}
}
.animation_line05{
top: 110%;
left: 0;
width: 0.2vw;
height: 0.7vw;
animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
transform-origin: bottom;
}
.animation_line06_wrapper{
transform: rotate(45deg)
}
.animation_line06{
top: 128%;
left: 0;
width: 0.2vw;
height: 0.7vw;
animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
transform-origin: bottom;
}
@keyframes animation_line05{
0%{
transform: translateY(0);
opacity: 1;
}
100%{
transform: translateY(1.5vw);
opacity: 1;
}
}
.animation_line07{
top: 50%;
left: -130%;
width: 0.7vw;
height: 0.2vw;
animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
transform-origin: left;
}
.animation_line08_wrapper{
transform: rotate(45deg)
}
.animation_line08{
top: 50%;
left: -162%;
width: 0.7vw;
height: 0.2vw;
animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
transform-origin: left;
}
@keyframes animation_line07{
0%{
transform: translateX(0);
opacity: 1;
}
100%{
transform: translateX(-1.5vw);
opacity: 1;
}
}
.rhombus{
position: absolute;
width: 100%;
height: 100%;
animation: rhombus 0.2s linear 2.2s forwards;
}
@keyframes rhombus {
0%{
transform: rotate(0)
}
100%{
transform: rotate(45deg)
}
}
.rhombus_small{
position: absolute;
width: 100%;
height: 100%;
animation: rhombus_small 0.4s linear 2.55s forwards;
}
@keyframes rhombus_small {
0%{
transform: scale3d(1,1,1);
opacity: 1;
}
99%{
transform: scale3d(0.15,0.15,0.15);
opacity: 1;
}
100%{
transform: scale3d(0.15,0.15,0.15);
opacity: 0;
}
}
/*===================
animation02
====================*/
.animation02{
position: absolute;
width: 100%;
height: 100%;
}
.rhombus_box{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 40vw;
height: 40vw;
animation: rhombus_box 0.4s linear 3.55s forwards;
}
.rhombus_item_wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 2.1vw;
height: 2.1vw;
opacity: 0;
}
.rhombus_item{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 2.1vw;
height: 2.1vw;
background-color: #fff;
transform: rotate(45deg)
}
.rhombus_item01_wrapper{
animation: rhombus_item01 0.5s linear 2.95s forwards;
}
.rhombus_item02_wrapper{
animation: rhombus_item02 0.5s linear 2.95s forwards;
}
@keyframes rhombus_item01{
0%{
transform: translateX(0);
opacity: 1;
}
100%{
transform: translateX(-18.5vw);
opacity: 1;
}
}
@keyframes rhombus_item02{
0%{
transform: translateX(0);
opacity: 1;
}
100%{
transform: translateX(18.5vw);
opacity: 1;
}
}
@keyframes rhombus_box{
0%{
transform: rotate(0)
}
100%{
transform: rotate(360deg)
}
}
.double_content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.double_wrapper02{
position: relative;
width: 100%;
height: 100%;
animation: double_content forwards;
opacity: 0;
}
.double_wrapper01{
display: block;
position: absolute;
border-radius: 50%;
overflow: hidden;
}
.double_wrapper01::before {
content: "";
display: block;
position: absolute;
background: #212022;
z-index: 2;
}
.double_wrapper01::after {
content: "";
display: block;
position: absolute;
background: #212022;
z-index: 3;
}
/*============
dotted circle
============*/
.dotted02{
top: 0;
animation-delay: 4.2s;
}
.dotted_hide{
position: absolute;
width: 31vw;
height: 31vw;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
}
.dotted01{
width: 30vw;
height: 30vw;
border: dotted 0.5vw #fff;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: visible;
}
.dotted_right::before{
content: "";
display: block;
position: absolute;
background: #212022;
z-index: 3;
}
.dotted_right::before{
top: 0;
left: 0;
width: 32vw;
height: 32vw;
transform-origin: left 16vw;
animation: rotate-circle-right 0.5s linear 4.2s forwards;
}
.dotted_right{
position: absolute;
width: 16vw;
height: 32vw;
z-index: 1;
top: 50%;
left: 75%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.dotted01::after{
top: -1vw;
left: -17vw;
width: 32vw;
height: 32vw;
transform-origin: right 16vw;
animation: rotate-circle-left01 0.5s linear 4.2s forwards;
}
@keyframes rotate-circle-left01 {
0% {
transform: rotate(0deg);
background: #212022;
opacity: 1;
}
50% {
transform: rotate(-180deg);
background: #212022;
opacity: 1;
}
50.01% {
transform: rotate(0deg);
opacity: 0;
}
100% {
transform: rotate(0deg);
opacity: 0;
}
}
/*============
white circle
============*/
.white02{
top: -100%;
animation-delay: 4.7s;
}
.white01{
width: 29vw;
height: 29vw;
background: #fff;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.white01::before{
top: 0;
left: 14.5vw;
width: 29vw;
height: 29vw;
transform-origin: left 14.5vw;
animation: rotate-circle-right 0.3s linear 4.7s forwards;
}
.white01::after{
top: 0;
left: -14.5vw;
width: 29vw;
height: 29vw;
transform-origin: right 14.5vw;
animation: rotate-circle-left 0.3s linear 4.7s forwards;
}
@keyframes rotate-circle-left {
0% {
transform: rotate(0deg);
background: #212022;
}
50% {
transform: rotate(-180deg);
background: #212022;
}
50.01% {
transform: rotate(-360deg);
background: #fff;
}
100% {
transform: rotate(-360deg);
background: #fff;
}
}
/*============
gray circle
============*/
.gray02{
top: -200%;
animation-delay: 4.8s;
}
.gray01{
width: 8vw;
height: 8vw;
background: #808184;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.gray01::before{
top: 0;
left: 4vw;
width: 8vw;
height: 8vw;
background: #fff;
transform-origin: left 4vw;
animation: rotate-circle-right 0.5s linear 4.8s forwards;
}
.gray01::after{
top: 0;
left: -4vw;
width: 8vw;
height: 8vw;
background: #fff;
transform-origin: right 4vw;
animation: rotate-circle-left03 0.5s linear 4.8s forwards;
}
@keyframes rotate-circle-left03 {
0% {
transform: rotate(0deg);
background: #fff;
}
50% {
transform: rotate(-180deg);
background: #fff;
}
50.01% {
transform: rotate(-360deg);
background: #808184;
}
100% {
transform: rotate(-360deg);
background: #808184;
}
}
/*============
orange circle
============*/
.orange02{
top: -300%;
animation-delay: 5.3s;
}
.orange01{
width: 27vw;
height: 27vw;
background: #f47141;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.orange01::before{
top: 0;
left: 13.5vw;
width: 27vw;
height: 27vw;
background: #fff;
transform-origin: left 13.5vw;
animation: rotate-circle-right 0.5s linear 5.3s forwards;
}
.orange01::after{
top: 0;
left: -13.5vw;
width: 27vw;
height: 27vw;
background: #fff;
transform-origin: right 13.5vw;
animation: rotate-circle-left02 0.5s linear 5.3s forwards;
}
@keyframes rotate-circle-left02 {
0% {
transform: rotate(0deg);
background: #fff;
}
50% {
transform: rotate(-180deg);
background: #fff;
}
50.01% {
transform: rotate(-360deg);
background: #f47141;
}
100% {
transform: rotate(-360deg);
background: #f47141;
}
}
@keyframes double_content{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes rotate-circle-right {
0% { transform: rotate(0deg); }
50% { transform: rotate(0deg); }
100% { transform: rotate(-180deg); }
}
.name{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30vw;
height: 30vw;
animation: name 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) 5.9s forwards;
opacity: 0;
}
.name p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 2.0vw;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
letter-spacing: 0.1em;
}
.name_circle01{
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 2vw;
height: 2vw;
border-radius: 50%;
}
.name_circle02{
position: absolute;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 2vw;
height: 2vw;
border-radius: 50%;
}
@keyframes name {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}