CSS Animations

CSS animations are used to create dynamic and interactive effects on web pages. CSS animations can be used to change the size, position, color, or other properties of an element over time.

The @keyframes Rule

CSS animations are written using the @keyframes rule. The @keyframes rule defines a set of keyframes, which are the different states of the animation. Each keyframe is defined by a set of properties and values.

For example, the following @keyframes rule defines an animation that will change the size of an element from 100px to 200px over 1 second:

@keyframes my-animation {
  from {
    width: 100px;
  }
  to {
    width: 200px;
  }
}

The animation Property

The animation property is used to bind an animation to an element. The animation property takes two values: the name of the animation and the duration of the animation.

For example, the following CSS rule will apply the my-animation animation to all <div> elements with a duration of 1 second:

div {
  animation: my-animation 1s;
}

Other Animation Properties

CSS also includes a number of other animation properties, such as delay, iteration-count, and direction. These properties can be used to control the timing and looping of the animation.

For example, the following CSS rule will apply the my-animation animation to all <div> elements with a delay of 0.5 seconds, a duration of 1 second, and a looping count of 3:

div {
  animation: my-animation 1s 0.5s infinite;
}

Task

Add style to change the background color of the header to #ff6f61 on hover. Run the code and experiment with the code to get used to it.

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <style>
        body {
            line-height: 1.6;
            background-image: url(https://www.learnwebstack.com/wp-content/uploads/2023/10/19449741-scaled.jpg);
            background-size: cover;
        }
        header { 
            color: #fff;
            background-color: #333;
            font-family: 'Arial', sans-serif;
            padding: 20px;
        }
        /* Add the code below */
         
         /* Add the code above */
        ul { 
            color: #007BFF;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
            margin: 10px;
         }
        ul li {
            margin: 5px 0;
        }
        ol {
            border: 2px solid #ccc;
            padding-left: 20px;
        }
         ol li {
            font-style: italic;
         }
         header h1 { 
            font-size: 36px;
            line-height: 1.2;
        }
         h1, footer {
           text-align: center;
        }
        form {
            background-color: #f2f2f2; /* Light gray */
            border-radius: 10px;
            width: 80%;
            margin: 0 auto;
            padding: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        input[type="submit"]:hover {
            background-color: #007BFF; /* Blue on hover */
            color: #fff;
        }
        section h2::after {
            content: "";
            display: block;
            height: 3px;
            background-color: #007BFF;
        }
         @media screen and (max-width: 600px) {
            header img {
                float: none; /* Remove float */
                margin-right: 0;
            }
        
            header h1 {
                font-size: 24px;
            }
        }
     </style>
</head>
<body data-rsssl=1>
    <header>
        <h1>Welcome to <i>My Portfolio<i/></h1>
        <img decoding="async" src="https://www.learnwebstack.com/wp-content/uploads/2023/09/pexels-cong-h-1404819.jpg" alt="Cat the Dev." />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purr-sollicitudin, ipsum ac varius catnip, tortor purr-tincidunt tortor, in scelerisque massa metus sit amet lectus. Phasellus auctor, tortor non varius suscipit, lorem miow bibendum ipsum, vel sodales felis arcu ac leo. Fusce id nibh purr-lacinia felis cursus suscipit. Nullam eget miow-cat amet neque volutpat condimentum. Proin in tempus metus. Nulla facilisi. Nulla miow felis, dignissim id justo vel, dictum venenatis justo.

Aenean ut ligula miow ipsum dolor sit amet meow consectetur adipiscing elit. Integer ac est ut metus bibendum fringilla. Curabitur blandit, turpis eget purr-eleifend consectetur, felis felis blandit ipsum, nec gravida tortor nisi eget ligula. Fusce metus velit, bibendum eget scelerisque a, purr-cursus quis nunc. Nulla meow felis, lacinia vitae sapien quis, venenatis cursus ipsum. Maecenas miow eu odio non purr-convallis. Meow eget nulla id nulla ultricies ultricies. Nullam non purr-sapien, ac venenatis miow. Integer eu sapien vel urna miow vestibulum. Fusce non purr-risus, eu vulputate metus.

Purr velit libero, scelerisque ut neque sed, viverra tristique justo. Maecenas metus felis, miow nec iaculis ut, dignissim ac purr-est. Aliquam erat volutpat. Aenean miow, arcu nec vestibulum venenatis, leo urna convallis purr-scelerisque. Suspendisse potenti. Suspendisse miow libero, pellentesque a purr-suscipit eget, pharetra id est. Meow eget metus quis quam tincidunt laoreet. Maecenas nec ipsum meow ipsum euismod malesuada. Sed vel ipsum sed urna gravida eleifend. Nulla eget felis eu nibh dictum imperdiet. Nulla nec semper lacus, quis vulputate purr-miow in fermentum. Ut quis purr-tortor et nunc scelerisque ultricies. Maecenas sed miow non miow volutpat elementum.
</p>
    </header>
    <section>
    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</section>
<section>
    <h2>Projects</h2>
    <ol>
        <li>Portfolio Website</li>
        <li>E-commerce App</li>
        <li>Blog Website</li>
    </ol>
</section>
<section>
    <h2>Education</h2>
    <table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <th>Position</th>
        <th>Company</th>
        <th>Duration</th>
    </tr>
    <tr>
        <td>Web Developer</td>
        <td>TumkurLab</td>
        <td>2020-2022</td>
    </tr>
</table>
</section>
<section>
    <h2>Contact Me</h2>
    <form action="">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Submit">
</form>
</section>
    <footer>
        © 2023 My Portfolio. Created by <a href="https://example.com">Your Name</a>
    </footer>
</body>

Conclusion

CSS animations are a powerful tool for creating dynamic and interactive effects on web pages. By understanding how CSS animations work, you can create web pages that are more visually appealing and easier to use.

Here are some tips for using CSS animations:

Use animations to add visual interest to your web pages.
Use animations to create interactive elements, such as buttons and menus.
Use animations to create a sense of movement and progression on your web pages.
Use animations to make your web pages more accessible to users with disabilities.

CSS Animations

Add LearnWebstack.com to your Homescreen!