Animation using CSS that starts with a horizontal slide and transitions into a diagonal slide

Can I create an animation to move a graphic image on an html page from the middle of the screen to the top left corner? Here is what I have so far:

  #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%;
  }

  }

Is this scenario achievable with CSS animations?

htmlcsscss-animations

Answer №1

It seems like you just need to add another keyframe to your animation. By changing your current final frame to 50%, and then adding a new final frame at 100%, you'll be able to adjust the CSS for that final frame (which could be placed 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 might want to experiment with timings and such, but it shouldn't be too difficult. You can adjust the animation time in the CSS and insert more frames to create pauses or other effects.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The random quote generator or current tweet quote feature is malfunctioning

I am having trouble with a jQuery on click function that is not working to tweet the current quote. I am working on building a random quote machine and tweeting the current quote is essential. Despite successfully implementing the JSON API, I cannot seem t ...

javascriptjqueryhtmljson

Using various class names with the :first-child selector

I need help styling the first item of a HTML structure I have: <div class="home-view"> <div class="view-header">Header</div> <div class="view-content">Content</div> </div> In this structure, I want to style t ...

csslesscss-selectors

A form field leaves the container element, positioned to the far right using the `float: right;` CSS property

This is the content within the <body> tag. <div id="border"> <p><h1 style="text-align: center;">Welcome to XYZ Airline!</h1></p> <table caption="Select your preferred seat" style="margin-botto ...

htmlcssalignment

magnify within a div with a set width

Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out. Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning to ...

cssangular

What is the best way to include a span within a select option element to display a flag beside each option?

I'm currently working on a dropdown menu that allows users to easily select their preferred language. I'm facing an issue with incorporating flags using https://github.com/lipis/flag-icon-css for each option. Can someone please assist me with thi ...

htmlcss

The onclick handler fails to function following the injection of html using jquery AJAX

After using ajax to inject HTML into my page, the onclick handler on a specific part of that injected HTML does not seem to be functioning... Specifically, I am referring to this image... < img class="close_row" src="img/close.gif"/> In jQuery, I ...

jqueryhtmlajax

When attempting to click the submit button, the action of submitting a form using jQuery/AJAX is not functioning as expected

When attempting to submit a form using jquery/AJAX, my function does not get called when clicking on the submit button. The structure of my website is as follows: CarMenu.php <html lang="en"> <html> <head> <meta charset="ISO-8859- ...

phpjqueryhtmlajaxform-submit

The jQuery AJAX request is not properly nesting the HTML elements generated by PHP

I am currently utilizing jQuery to intercept a link that leads to a php file. This particular php file consists mostly of html, but also calls two php functions that utilize for loops to generate html content. The issue I am facing is that the ajax call is ...

phpjqueryhtmlajaxgenerated

Enhance your CouchDB experience by customizing templates to include unique headers and footers

I am currently using CouchDB and CouchApp to host a web application. I have experience with Django and Jinja2, where I can extend templates in two different ways: {% include "header.html" %} or {% extends "base.html" %} <<<---- my preferred me ...

htmltemplatescouchdbcouchapp

Updating data in a SQL database using PHP when a button is clicked

This Question was created to address a previous issue where I had multiple questions instead of focusing on one specific question Objective When the user selects three variables to access data, they should be able to click a button to modify one aspect o ...

javascriptphpjqueryhtmlmysql

Using the power of AJAX, retrieve data from a PHP script and showcase the response within

Within my HTML file, I have implemented a feature that allows users to input a value. To validate this input, I created a PHP script that checks if the entered value exists in the database. The script returns the following JSON response: {"active":true} ...

javascriptphpjqueryhtmlajax

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

I have a link that points to a specific location on Google Maps using latitude and longitude: http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png Now, I am looking to add a blinking border to this marker link. Is there a way to achieve this ...

javascripthtmlcssimagephotoshop

Displaying specific data points

I am encountering an issue where I want to select multiple values and have each selected value displayed. However, when I make a selection, I only see one value from a single box. I do not wish to use append because it keeps adding onto the existing valu ...

javascripthtmljquery

Can anyone tell me the best way to access the name attribute of an HTML element in TypeScript?

Currently, my code is utilizing the name attribute to verify whether the user has entered information in a specific field and validating the input. However, I am facing an issue where the submit button remains active even if there are empty fields presen ...

javascripthtmlangulartypescript

Incorporating and designing an external document

Another website has a file that I would like to include in one of my own pages. The URL format is as follows: http://example.com/path/with/some/variables I could use an iframe to accomplish this, but I also want to customize the CSS of elements within th ...

phphtmlcssiframe

The URL in $.mobile.changePage has not been updated

One of the challenges I encountered was switching between two pages - a menu list page and a menu detail page. The transition from the menu to the menu detail page was achieved using $.mobile.changePage. While everything seemed to be working correctly, the ...

jqueryhtmlcordovajquery-mobile

How can the output directory of the CSS file generated by Compass/Webby be modified?

I need assistance in getting my *.css file to be outputted in the output/css directory instead of the stylesheets directory. How can I achieve this? Here's what I've already attempted: Compass.configuration do |config| config.project_path = F ...

csssasscompass-sasswebby

The `innerHTML` function is responsible for closing HTML

My switch structure is set up as follows: switch (ratio) { case "16:9": imgContainer.innerHTML = '<img src="images/test-rata-de-aspect.jpg">' break case "4:3": imgContainer.innerHTML = '<img src="image ...

javascriptjqueryhtml

What could be causing the image file input to appear sideways or flipped?

I am currently working on a Vuejs component that allows users to select a file from their local system. Once the user selects an image, it is previewed in a div. However, I have noticed that some images appear 'flipped' sideways automatically, es ...

javascripthtmlcssvue.jsvuejs2

Favicon not displaying on the webpage

I am running a website and I want to add a favicon, but for some reason, it is not displaying correctly. When I view the site on my local server, it just shows a cloud symbol, and when I open the HTML file directly in a browser, it doesn't show any fa ...

htmlfavicon