CSS Transformations & Animations for Web Design

CSS Transform Properties

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

CSS Animations

Animations are similar to the transform property. When dealing with complex animations, we will use the animation property. This animation contains the animation name, duration, iteration count, direction, and delay. It can be defined using @keyframes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animations</title>
    <style>
        .container{
            background-color: blanchedalmond;
            height: 70vh;
            width:60vw;

        }
        .box{
            width: 200px;
            height: 150px;
            background-color: aquamarine;
            /* animation-name: Animation1;
            animation-duration: 4s;
            animation-iteration-count: 5;
            animation-timing-function: ease-in;
            animation-delay: 2s;
            animation-direction: alternate-reverse; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: Animation1 3s ease-in-out 2s 5 reverse,
                        Animation2 3s ease-in-out 2s  5 forwards
            ;
        }

        @keyframes Animation1 {
            from{

            }
            to{
                transform: translateY(500px);
            }
        }

        @keyframes Animation2 {
            from{

            }
            to{
                transform: scaleX(2);
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

CSS Object-Fit and Position

Theobject-fit property in CSS controls how content, especially images and videos, is sized within a defined area. It helps maintain a visually appealing layout by determining how an element's content fits its container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Object-fit</title>
    <style>
        .container{
            height: 300px;
            width: 400px;
            border: 2px solid black;
            background-image: url(<https://media.istockphoto.com/id/1065043970/photo/young-woman-sitting-on-edge-looks-out-at-view.jpg?s=612x612&w=0&k=20&c=zXlF6EJwCHDAtEJ_kh8zs6PqliCKZA75F93ffAkJURY=>);
            background-position: center center;
            background-repeat: no-repeat;
        }
        /* img{
            height: 300px;
            width: 400px;
            object-fit: fill; 
            object-fit: contain;
             object-fit: cover;
             object-fit:scale-down; 
        } */
    </style>
</head>
<body>
    <div class="container">

        <!-- <img src="<https://media.istockphoto.com/id/1065043970/photo/young-woman-sitting-on-edge-looks-out-at-view.jpg?s=612x612&w=0&k=20&c=zXlF6EJwCHDAtEJ_kh8zs6PqliCKZA75F93ffAkJURY=>" alt="img"> -->

    </div>
</body>
</html>

CSS Filters

The filter CSS property adds graphical effects such as blur or color shift to an element. Filters are often used to modify the appearance of images, backgrounds, and borders.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Filters</title>

    <style>
        .img1{
            filter: blur(2px);
        }
        .img2{
            filter: contrast(100%);
        }

        .img3{
            filter: grayscale(100%);
        }

        /* .container .img1{
            filter: blur(2px);
        } */
    </style>
</head>
<body>
    <div class="container">
        <img class="img1" src="<https://media.istockphoto.com/id/1403500817/photo/the-craggies-in-the-blue-ridge-mountains.jpg?s=612x612&w=0&k=20&c=N-pGA8OClRVDzRfj_9AqANnOaDS3devZWwrQNwZuDSk=>" alt="img1">

        <img class="img2" src="<https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtnvAOajH9gS4C30cRF7rD_voaTAKly2Ntaw&s>" alt="img2">

        <img class="img3" src="<https://static.vecteezy.com/vite/assets/photo-masthead-375-BoK_p8LG.webp>" alt="img3">
    </div>
</body>
</html>

Challenges and Solutions

Challenge: I was facing issues with the output in my animations; it wasn't displaying correctly, which was quite frustrating.

Solution: After inspecting the code thoroughly and rerunning it, I was able to identify the problem. Now, the output is working perfectly!

Enhance Your Web Design with CSS Transformations and Animations