Image Animation in CSS

#html #css #webdev #tutorial

Hello Guys today i will show you an image animation in CSS.

Let's get started...
Before dive into the topic , first understand this thing.

What is var in CSS?

The var() function is used to insert the value of a CSS variable.
Means if you provide an element a value like "--j:1", it means that element has a variable called "i" with a value of "1".
We can access this variable using var() function.

HTML -

 <div class="bodyContainer">
      <div class="imageContainer">
        <img style="--j:1.2;" class="imageAnimation" src="./croppedImages/image_part_001.jpg" />
        <img style="--j:1.4;" class="imageAnimation" src="./croppedImages/image_part_002.jpg" />
        <img style="--j:1.6;" class="imageAnimation" src="./croppedImages/image_part_003.jpg" />
        <img style="--j:1.8;" class="imageAnimation" src="./croppedImages/image_part_004.jpg" />
        <img style="--j:2;" class="imageAnimation" src="./croppedImages/image_part_005.jpg" />
        <img style="--j:2.2;" class="imageAnimation" src="./croppedImages/image_part_006.jpg" />
        <img style="--j:2.4;" class="imageAnimation" src="./croppedImages/image_part_007.jpg" />
        <img style="--j:2.6;" class="imageAnimation" src="./croppedImages/image_part_008.jpg" />
        <img style="--j:2.8;" class="imageAnimation" src="./croppedImages/image_part_009.jpg" />
      </div>
    </div>

I have created a body container which will centralise the image section
The imageContainer will create a container of 3x3 grid as we have 9 images for this animation.
These 9 images are just cropped part of 1 single image.

CSS

.bodyContainer {
        display: grid;
        height: 80vh;
        place-content: center;
        animation-name: heightZero;
        animation-duration: 4.5s;
      }

      .imageContainer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

     /* <!-- Setting the animation, duration, fill mode and timing function for the images. --> */
      img {
        width: 300px;
        height: 200px;
        animation-duration: calc(var(--j)*1s);
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
      }

      img:nth-child(1) {
        animation-name: slideLeft;
        border-top-left-radius: 10px
      }
      img:nth-child(2) {
        animation-name: slideTop;
      }
      img:nth-child(3) {
        animation-name: slideRight;
        border-top-right-radius: 10px;
      }
      img:nth-child(4) {
        animation-name: slideLeft;
      } 
      img:nth-child(5) {
        animation-name: slideTop;
      } 
      img:nth-child(6) {
        animation-name: slideRight;
      }
      img:nth-child(7) {
        animation-name: slideLeft;
        border-bottom-left-radius: 10px;
      }
      img:nth-child(8) {
        animation-name: slideBottom;
      }
      img:nth-child(9) {
        animation-name: slideRight;
        border-bottom-right-radius: 10px;
      }


      @keyframes slideLeft {
        0% {
          opacity: 0;
          transform: translateX(-100px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes slideRight {
        0% {
          opacity: 0;
          transform: translateX(100px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes slideTop {
        0% {
          opacity: 0;
          transform: translateY(-100px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes slideBottom {
        0% {
          opacity: 0;
          transform: translateY(100px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

The css part is quite simple , we have made the body container grid and use the place-content-center to center our imageContainer.
The image container is converted into 3x3 grid which will have 9 images , 3 images in each row.
We have applied some width and height to img tag so, it will be applied to all the 9 images.
Then we have used the var function to provide the different value to each image for animation-duration
Calc() is used to calculate the property provided by var and assign that value to that css property.
Then using nth-child() selector , we have targeted all the images separately as you can see we have provided different animation names to the images and gave border-radius to only those images which are at the edges in the grid.
After that we have created 4 types of animation slideLeft,slideRight,slideTop,slideBottom , each animation basically slides the image into frame from the direction it specifies.
We have used translate property to slide the image from different direction using X and Y axis and opacity is used to make the image looks fading in to the frame.

NOTE - YOU CAN CROP ANY IMAGE INTO DIFFERENT PARTS LIKE A GRID FROM THE LINK BELOW

https://www.imgonline.com.ua/eng/cut-photo-into-pieces.php

Output -

The output looks like breaking because the images are fetching from google drive not from local host. So, try this animation on your machine to see it smoothly

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/text-animation-in-css-16j9

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90