html animation source code




!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Animation</title>
<style>
    /* Define the animation */
    @keyframes example {
        0% {background-color: red; left: 0px; top: 0px;}
        50% {background-color: yellow; left: 200px; top: 0px;}
        100% {background-color: red; left: 0px; top: 0px;}
    }

    /* Apply the animation to a div */
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

In this code:

  • We define a CSS animation called example le using @keyframes.
  • This animation gradually changes the background color and position of a box element.
  • The animation is applied to a div element with the class .box.
  • The animation duration is set to 4 seconds, and it repeats infinitely.

Comments

Post a Comment

Popular posts from this blog

Cute Lamp Login Page

Looking for a fun, interactive way to spice up a dark-themed UI? Today, we are building a "Cute Lamp" login page . This single-file solution features a fully scalable SVG cartoon lamp with changing expressions, smooth color-shifting neon glows, and a pull-string interaction cycle that toggles the light and the UI theme! Below is the complete HTML, CSS, and JavaScript code. Just copy it and save it as an .html file. index.html Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cute Lamp Interactive Login</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --bg-color: #0b0f14; --font-family: 'Poppins', sans-serif; ...
Read more

Header Animation | Bold Text & 3D Effect | CSS Tutorial|Cursor animation effect using html css js

Code  <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Header Animation</title>   <style>     header nav ul {       list-style: none;       padding: 0;       margin: 0;     }     header nav ul li {       display: inline-block;       margin-right: 20px;     }     header nav ul li a {       text-decoration: none;       color: #333; /* default color */       position: relative;       transition: color 0.3s ease, transform 0.3s ease;       font-weight: bold; /* make text bold */     }     header nav ul li a:hover {       color: red; /* hover color */       transform: translateZ...
Read more

Portfolio website

Kanani Shubham - Portfolio Kanani Shubham About Portfolio Education Contact Creative Developer & Designer I build visually stunning websites with modern designs and innovative user interfaces that enhance the user experience. About Me With a passion for both design and technology, I have developed a wide range of skills in web development. From front-end design to back-end solutions, I aim to create aesthetically pleasing and functional websites for businesses. Education Bachelor's in Computer Science XYZ University - 2018 to 2022 Full-S...
Read more