1. Transitions

CSS transitions allow you to change property values smoothly over a specified duration.

1.1 Transition Properties

The transition property is shorthand for defining the transition effects for various properties.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition Example</title>
    <style>
        .transition-example {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 0.5s ease, width 0.5s ease;
        }

        .transition-example:hover {
            background-color: red;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="transition-example"></div>
</body>
</html>

1.2 Transition Timing Functions

Timing functions control the speed of the transition. Common functions include linear, ease, ease-in, ease-out, and ease-in-out.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition Timing Functions Example</title>
    <style>
        .timing-functions-example {
            width: 100px;
            height: 100px;
            background-color: green;
            transition: width 2s ease-in-out;
        }

        .timing-functions-example:hover {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="timing-functions-example"></div>
</body>
</html>

2. Animations

CSS animations enable more complex changes than transitions by allowing multiple steps and keyframes.

2.1 Keyframes

Keyframes define the intermediate steps in a CSS animation sequence. The @keyframes rule specifies the styles for different points in the animation.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyframes Example</title>
    <style>
        @keyframes exampleAnimation {
            0% { background-color: yellow; }
            50% { background-color: orange; }
            100% { background-color: red; }
        }

        .keyframes-example {
            width: 100px;
            height: 100px;
            animation: exampleAnimation 3s infinite;
        }
    </style>
</head>
<body>
    <div class="keyframes-example"></div>
</body>
</html>

2.2 Animation Properties

Animation properties control the behavior of animations, such as duration, delay, iteration count, and direction.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Properties Example</title>
    <style>
        .animation-properties-example {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: exampleAnimation 5s ease-in-out infinite alternate;
        }

        @keyframes exampleAnimation {
            0% { transform: translateX(0); }
            100% { transform: translateX(100px); }
        }
    </style>
</head>
<body>
    <div class="animation-properties-example"></div>
</body>
</html>

2.3 Animation Timing Functions

Animation timing functions determine the speed curve of the animation. They include linear, ease, ease-in, ease-out, and ease-in-out.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Timing Functions Example</title>
    <style>
        .animation-timing-functions-example {
            width: 100px;
            height: 100px;
            background-color: purple;
            animation: exampleAnimation 4s ease-in;
        }

        @keyframes exampleAnimation {
            0% { transform: scale(1); }
            100% { transform: scale(1.5); }
        }
    </style>
</head>
<body>
    <div class="animation-timing-functions-example"></div>
</body>
</html>