What is the best way to bring my image to life and move it to

Just starting out with HTML and CSS. Can anyone help me learn how to animate my image so that it moves from its current position to another location? For example, transitioning from "top: 280px; left: 600px;" to "top: 180px; left: 500px;"

I'm looking for someone to assist me through this process. Thank you. Below is the code I currently have:

#robot {
  position: fixed;
  top: 280px;
  left: 600px;
  border-radius: 50%;
  width: 50px;
  height: 60px;
}

body {
  height: 100%;
  width: 100%;
  background-image: url('TPHRG floorplan1.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* background-position: center; */
  background-size: 980px 400px, cover;
}
<img id="robot" src="https://img.favpng.com/20/7/18/clip-art-robot-free-content-image-vector-graphics-png-favpng-pJhfbKDrGy0yuQsKVTrjEu7br.jpg">

htmlcss

Answer №1

Here is an easy-to-understand demonstration of how a transition works between two positions.

The important thing to remember is to include the transition property in your element (#robot), specifying the property you want to animate, the duration of the animation, and the easing function, among other things. For more examples, refer to the official documentation.

If using the all keyword for convenience in the transition rule, it's recommended to explicitly define which property to animate in the separate transition-property rule for better performance.

In this example, I'm utilizing the :hover pseudo-class to initiate the animation. However, it could also be triggered when the page loads or when a specific class is applied to your element via JavaScript.

Hopefully, this explanation clarifies the concept for you!

.container {
  width: 500px;
  height: 150px;
  position: relative;
  padding: 10px;
  border: 5px solid green;
}

.cat {
  position: absolute;
  top: 50px;
  left: 50px;
  transition: all 1s ease-in;
  transition-property: top, left;
}

.container:hover .cat {
  top: 10px;
  left: 300px;
}
<div class="container">

  Hover over me!
  <img class="cat" src="https://placekitten.com/100/100" alt="A cute cat">
  
</div>

Answer №2

Indeed, achieving this effect is possible with the use of CSS.

<html>
  <head>
  <meta charset="utf-8">
  <title></title>

  <style>

    #robot {
      position: fixed;
      top: 280px;
      left: 600px;
      border-radius: 50%;
      width: 50px;
      height: 60px;
      -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
    }

    body {
      height: 100%;
      width: 100%;
      background-image: url('TPHRG floorplan1.png');
      background-repeat: no-repeat;
      background-attachment: fixed;
      /* background-position: center; */
      background-size: 980px 400px, cover;
    }
    
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {top: 280px;left:600px;}
  to {top: 180px;left:500px;}
}

/* Standard syntax */
@keyframes example {
  from {top: 280px;left:600px;}
  to {top: 180px;left:500px;}
}

  </style>

  <body>

    <img id="robot" src="https://www.w3schools.com/images/compatible_chrome.gif">

    <?php ?>

  </body>
</html>

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

What are the elevated sections in bootstrap?

Having come from Semantic-UI and starting to learn Bootstrap, I must say that despite its widespread popularity, I find Bootstrap a bit lacking compared to what Semantic-UI has to offer in terms of basic stylings. Currently, I am on the lookout for the Bo ...

htmlcssbootstrap-4semantic-ui

What is the best way to distinguish between a button click and a li click within the same li element

In my angular and css GUI, each line is represented as an li inside a ul with a span. The functionality includes a pop-up opening when clicking on the li background and another action occurring when pressing the button (as intended). The issue arises when ...

htmlangulartypescript

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

javascriptjquerycsswordpresspreloader

Step-by-step guide on incorporating Google Fonts and Material Icons into Vue 3 custom web components

While developing custom web components with Vue 3 for use in various web applications, I encountered an issue related to importing fonts and Google material icons due to the shadow-root. Currently, my workaround involves adding the stylesheet link tag to t ...

javascriptcssvue.jsweb-component

Highlighting menu elements when landing on a page and making another menu element bold upon clicking in WordPress

I've been searching extensively for a solution to this issue. I'm trying to make the menu item DE appear bold when entering the site, and if I click on EN, I want DE to return to normal (thin) font while EN becomes bold. You can find the site he ...

javascriptcsswordpressmenubold

Navigating through various div elements in Javascript and sending parameters to a script

Context In my project, I am using PHP to generate a series of voting sections. Each section follows the same format except for a unique number assigned to it, which increases with each iteration of the PHP loop. To keep track of the unique numbers, I uti ...

javascriptphphtml

Retrieving information from CRM online utilizing the Web API

Recently, I developed a webpage to serve as a survey for end users to provide feedback on the helpdesk technician's performance in resolving tickets. The webpage was constructed using HTML, CSS, JS, and PHP. Currently, the page requires access to two ...

javascripthtmldynamics-crm

Batch Script for Reading and Writing HTML files

My experience with writing DOS Batch scripts has been limited to basic tasks. However, I recently encountered a need to create a script that reads an HTML template file and generates a new file from it. I successfully managed to store the file data in a va ...

htmlbatch-file

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

javascriptphphtml

Tips for activating hover effect on child components by hovering over the parent container?

At the moment, I am tackling an issue with CSS in a nextJS web application. The problem lies in a parent div element that contains multiple child elements. My goal is for hovering over the parent div to trigger changes on the child elements as well. Here& ...

csswebnext.jshover

Tips for showing data from Ajax responses on an HTML page

In my code, there are two JavaScript functions: The function fetch_items is responsible for returning data in the form of stringvalue. On the other hand, the function extract_items($arr) passes values to the fetch_items function. function fetch_items ...

javascriptjqueryhtmlajaxdom

Is it possible to replicate an HTML table using JavaScript without including the headers?

Discover a JavaScript snippet in this stack overflow post that allows you to create a button for automatically selecting and copying a table to the clipboard. When pasting the data into an Excel template, my users prefer not to include the header informat ...

javascripthtmlcopyclipboard

Getting Values from .Properties File in JavaScript/HTML pages that are Executing in a Node.js Server

I have a configuration file named "site.properties" with the following content: #Properties file #Database Connection Info db.host.name = localhost db.user.name = username db.password = password db.database.schema = db1 #Server Connection Info ...

javascripthtmlnode.js

Can you explain the functionality of the combination selector "AB," where "A" and "B" represent any selectors?

I've been delving into the concept of the "combination selector" by referring to resources on MDN. This selector involves selecting elements that match both criteria A and B simultaneously when they are placed together. Can someone shed some light on ...

htmlcssselector

What is the process for embedding a 3D model using three.js into a specific div on a webpage?

Lately, I've been struggling with a persistent issue. I can't seem to figure out how to integrate my three.js scene into a div on my website. Despite watching numerous YouTube videos and reading countless articles on the topic, I still haven&apos ...

javascripthtmlcsswebthree.js

Spacing between Div tags

Struggling with a tricky HTML cross-browser problem. The site was built by multiple people, making it quite messy, but needs to go live as soon as possible! Each of the 4 page layouts on the site are different and handled by separate classes. However, whe ...

csscross-browserspaces

Inconsistencies observed during the native JSON import process in JavaScript

Encountered a strange behavior when loading a JSON file into JavaScript while working on a React project. Seeking an explanation and guidance on properly accessing data from the JSON data store. The JSON file contains product data: { "product ...

javascripthtmlreactjsjson

Certain HTML code on a webpage is currently inaccessible to me

Struggling with web scraping on a webpage due to inaccessible code. The part of the page's code that remains out of reach is only accessible through an anchor tag, with the following html: <a class="MTLink" href="#d192633539-47" title="example" &g ...

htmlweb-scraping

Fading colored images and backgrounds using Javascript

Although js and html are not my strong points, I am attempting to create two simple effects on a single page. As the user scrolls down the page, I want the background image or color to change as different divs come into view and then move off the screen. ...

javascriptcssfadein

Issues with Toggling Visibility in HTML, CSS, and Javascript

Currently, I am working on a website and following a tutorial called "Creating Slideshow using HTML, CSS, and Javascript" by W3Schools. In the project, I want to hide the thumbnail images located at the bottom and the navigation arrows initially and have t ...

javascripthtmlcssvisible