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

Does CSS positioning change depending on the screen size?

I need help fixing the positioning of my logo on the screen. I want it to be 40px from the top and centered horizontally regardless of the screen size. Here is the code that I have: <html> <head> <style type="text/css> body{ back ...

htmlcsspositioning

Programming in Python often involves utilizing a combination of powerful libraries such as BeautifulSoup,

I am currently developing a program that is designed to extract emails and collect specific links from them, particularly those from Newegg. I have successfully used iMAP to log in and access the HTML content of the emails. However, I am encountering an is ...

pythonhtmlbeautifulsouppython-requestsimap

Is there a way to achieve a transparent background while animating the second text?

I am seeking to create a unique typography animation that involves animating the second text, which is colored and consists of multiple text elements to animate. The animation should showcase each text element appearing and disappearing one after the other ...

javascripthtmljquerycss

Generate a fresh row in a table with user inputs and save the input values when the "save" button is

HTML: <tbody> <tr id="hiddenRow"> <td> <button id="saveBtn" class="btn btn-success btn-xs">save</button> </td> <td id="firstName"> <input id="first" type="tex ...

javascriptjqueryhtml

Can we modify the cell width in knitr and pandoc?

When generating an HTML file using knitr/pandoc to display multiple tables in a loop, how can you ensure that each table has the same total width despite having varying numbers of cells? --- output: html_document: theme: cosmo --- {r results ="asis", e ...

htmlcssrknitr

Validating phone numbers with regular expressions in Java

I recently started learning Java and Regex, and I'm currently facing a challenge with phone number validations. The task at hand is to create simple phone number validations. I already have an input field in my HTML code that has the attribute type=" ...

javaregexhtmljsp

Emphasizing the content of the text file with the inclusion of span tags

I am relatively new to working with angular js and javascript. I have a document or text file that looks something like this: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dumm ...

javascriptjqueryhtmlcssangularjs

Create various designs for a section of a webpage

My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code: <div class="flex-box"> <div class="col" id="html-panel"> <p>html</p> </div& ...

javascriptcssangularjsangular-ui-routerflexbox

Is there a way to modify the variable in order to switch the font of the heading every second using CSS and JavaScript?

I'm trying to create a heading that changes fonts every second, but I'm having trouble changing the variable to set it to another font. Check out my code here. Despite watching tutorials, everything seemed too confusing. var root = document.q ...

javascripthtmlcss

Turn off jQuery on certain pages while keeping the styling intact?

Hey there, I'm currently in the process of developing a mobile website using jquery. I was wondering if it's possible to disable jQuery on certain pages while still retaining the styles, such as the navigation bar. The reason for wanting to disab ...

jqueryhtmlnavbar

What are some alternative ways to create a text field with the same style as Material UI's without relying on the Material UI

With the power of HTML, CSS, and Reactjs I am aiming to create a functionality where the placeholder animates up to the border upon clicking on the text field An example can be seen with Material UI text field: https://material-ui.com/components/text-fie ...

htmlcssreactjsmaterial-ui

Unchecking and checking the radio button is necessary in order for it to function properly

Today, I'm puzzled by the odd behavior of my radio buttons in a pixel drawer project. In order for the radio button to function properly, I have to uncheck it and then recheck it. The pixel drawer allows me to change colors and sizes using these radio ...

javascripthtmlradio-button

Interacting with Apexcharts: Exploring a Tiny Column with Hover

While using apexcharts, I encountered an issue with small columns. It can be quite challenging to render the tooltip properly because you have to hover very precisely over the column. Query: Is there a way to expand the hover area to make it easier to int ...

javascriptcssreactjschartsapexcharts

The system encountered an error stating that the class 'Database' could not be found

Whenever I try to establish a connection to my SQL database using my pdo_object.php file, I encounter the following error in my model.php: Fatal error: Class 'Db' not found in /path/model.php on line 8 I have double-checked that all permissions ...

phphtmlmysqlsqldatabase

Encountering an issue where an error message indicates that a variable previously declared is now undefined

Currently, I am working on developing a small test application to enhance my coding skills. However, I have encountered a roadblock while attempting to display dummy information from a mongodb database that I have set up. I have tried various solutions bu ...

javascripthtmlnode.jsmongodbejs

react native ScrollView items with uniform padding at the top and bottom

I'm currently working on a scroll component that resembles a gallery of images. My goal is to center the images based on the device height with equal padding on both the top and bottom. However, I'm facing an issue where the top padding does not ...

cssreactjsreact-native

Bug with the button and text input feature in Firefox

I am facing a strange issue where the button and input have the same CSS (except for the background), but Firefox is displaying them differently. This problem does not occur in IE or Chrome. #searchInput { width: 80%; margin: 0 auto; display: ...

htmlcssfirefoxbuttoninput

The multiple-choice selection tool is not displaying any choices

I am having an issue with my ng-repeat code in conjunction with the jquery multiple-select plugin. Despite using this plugin for a multiple select functionality, the options generated by ng-repeat are not visible. Below is the code snippet in question: & ...

javascriptjqueryhtmlcssangularjs

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

I need to display 2 adjacent boxes with dynamic content rendered using Angular. The Container should have the same height as Box1. The height of Box2 may vary due to its dynamic nature, but it should never be taller than Box1. If it does become higher, a s ...

htmlcssdynamicheight

Develop an XML document that includes CSS and DTD seamlessly incorporated

Could someone please provide me with a short code example of an XML file that includes both a DTD and CSS styles all in one file? Just need one element as an example. I'm new to XML and can't seem to find any examples with both XML and CSS comb ...

htmlcssxmlxhtmldtd