CSS Animation using HTML and CSS

codinglabsolution

   

 CSS Animation using HTML and CSS  

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; } }
































































































































































































































































































source Code

إرسال تعليق

ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
أُووبس!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.