CSS Tutorials

Using Transitions and Animations for Dynamic Effects

Using Transitions and Animations for Dynamic Effects

User experience is enhanced by dynamic effects and interaction provided by transitions and animations.

Transition: When a state of an element changes, its attributes gradually alter over time.

An animation is a more intricate form of style change based on pre-established keyframes than a transition.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transitions and Animations Example</title>
    <style>
        .transition {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            transition: width 2s;
        }
        .transition:hover {
            width: 300px;
        }
        @keyframes example {
            from {background-color: red;}
            to {background-color: yellow;}
        }
        .animation {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: example;
            animation-duration: 4s;
        }
    </style>
</head>
<body>
    <div class="transition">Hover over me!</div>
    <div class="animation"></div>
</body>
</html>

logo

CSS

Using Transitions and Animations for Dynamic Effects

Beginner 5 Hours

Using Transitions and Animations for Dynamic Effects

User experience is enhanced by dynamic effects and interaction provided by transitions and animations.

Transition: When a state of an element changes, its attributes gradually alter over time.

An animation is a more intricate form of style change based on pre-established keyframes than a transition.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transitions and Animations Example</title>
    <style>
        .transition {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            transition: width 2s;
        }
        .transition:hover {
            width: 300px;
        }
        @keyframes example {
            from {background-color: red;}
            to {background-color: yellow;}
        }
        .animation {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: example;
            animation-duration: 4s;
        }
    </style>
</head>
<body>
    <div class="transition">Hover over me!</div>
    <div class="animation"></div>
</body>
</html>

Similar Data Science Tutorials

Related tutotials

Frequently Asked Questions for css

line

Mail us :

Address :

India

Categories

Copyrights © 2024 letsupdateskills All rights reserved