CSS animation horizontal slide followed by diagonal slide

August 5, 2022

I have a graphic image that is placed on an html page. I would like to run an animation which slides the graphic image from the middle of the page on the left border to the middle of the screen. Once the graphic image reaches the center of the screen, I want the animation to slide the graphic image diagonally from the center of the screen to the top left corner of the screen. Is this possible?

This is what I have that slides the image from the left margin to the center of the screen:

  #img1 {   
       bottom: 50%;   
       display: block;   
       position: absolute;   
       animation: linear;   
       animation-name: image1;   
       animation-duration: 10s; 
   }  

  @-webkit-keyframes image1 {   
       0% {     left: 0;     transform: translateX(0);   }   
      100% {     left: 50%;   } 
  }

Thank you.

>Solution :

If I understand what you are asking, you just need another keyframe in your animation. Your current final frame would be changed to 50% and then adding 1 final frame at 100% would allow you to set the CSS for the final frame (being in the top-left corner).

 #img1 {
       top: 50%;
       display: block;
       position: absolute;
       animation: image1 10s linear forwards;
   }

  @-webkit-keyframes image1 {
       0% { left: 0; transform: translateX(0);  }
      50% { left: 50%; top: 50%; }
      100% { left: 0; top: 0; }
  }

<div id="img1">IMAGE</div>

You may still want to play with timings and such, but that shouldn’t be too hard. You can increase the animation time in the CSS and add additional frames to create pauses/etc.