The car glides smoothly across the screen from left to right before disappearing from view

I'm looking to create an animation where a car moves from left to right and then switches to another image moving from right to left. Can anyone provide assistance with this task?

Here's the code I have so far:

.car-movement {
    position: absolute;
    top: 65%;
    left: 0;
    -webkit-animation: linear infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 5s;
    }
    @-webkit-keyframes run {
    0% {
        left: 0;
     }
    50% {
        left: calc(100% - 100px);
     }
    100% {
        left: 0;
     }
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">

htmlcss

Answer №1

Insert the emoticon of a car within a div that has overflow.

Create animation effects using transform: rotateY and left.

My approach involved using a div with a car emoticon instead of an actual image.

.car-movement {
  overflow: hidden;
  font-size: 40px;
  height: 50px;
}

.car-movement > .car {
  position: relative;
  display: inline-block;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 5s;
}


@keyframes run {
  0% {
    transform: rotateY(180deg);
    left: -100px;
  }
  50% {
    transform: rotateY(180deg);
    left: 100%;
  }
  51% {
    transform: rotateY(0deg);
    left: calc(100% + 100px);
  }
  100% {
    transform: rotateY(0deg);
    left: -100px;
  }
<div class="car-movement">
  <div class="car">🚕</div>
</div>

Answer №2

If my understanding is correct, you are looking for the car to move from left to right and then hide on the right side of the window? In order to achieve this, make sure to adjust the following code snippet:

      0% {
         left: -150px;
      }
      50% {
         left: calc(100% - 150px);
      }

Instead of using 100px, replace it with the length of the car image. Additionally, before adding any code, include the following line for the body:

       body {
        overflow-x: hidden;
       }

Answer №3

.car-movement {
    position: absolute;
    top: 65%;
    left: 0;
    -webkit-animation: linear infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 5s;
    }
    @-webkit-keyframes run {
     0% {
      left: 0;
     }
     48% {
       -webkit-transform: rotateY(0deg); 
     }
     50% { 
      left: calc(100% - 100px);
      -webkit-transform: rotateY(180deg); 
     }
     98% {
      -webkit-transform: rotateY(180deg); 
     }
     100% {
     left: 0;    
     -webkit-transform: rotateY(0deg);
     }
}
    <img class="car-movement" src="/assets/img/1car.svg" alt="car">

Answer №4

To enhance the animation of your car moving from left to right and back, consider adding intermediate steps to make it turn around before changing direction.

Make sure to insert your own car svg image for a complete visual effect.

.car-movement {
  position: absolute;
  top: 65%;
  left: 0;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 5s;
}

@keyframes run {
  0% {
    left: 0;
    transform: translate(-100%);
  }
  50% {
    left: 100%;
    transform: translate(0);
  }
  50.5% {
    transform: rotateY(180deg) translate(0);
  }
  99.5% {
    left: 0;
    transform: rotateY(180deg) translate(0);
  }
  100% {
    transform: rotateY(0deg) translate(0);
  }
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">

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

Creating a custom breakpoint in Bootstrap for adding unique CSS styles

Consider this scenario <div class="col-md-my"> </div> .xx { color: black; } .yy { color: red; } Similar to how Bootstrap adjusts width at different breakpoints. Create a new class called col-md-my When the width exceeds the ...

htmlcssbootstrap-5

Refrain from showing content beneath a certain element

Is there a way to hide all content that appears after a specific element, such as a particular class of div? The issue I am facing involves using a 1&1 webpage builder with a restrictive layout-template enforced by my boss. I am trying to remove the foote ...

javascriptjquerycsshidefooter

Transfer various field values to jQuery

I am looking to send multiple field values to jQuery for validation, but currently only receiving the value of the changed field. How can I pass both field values to jQuery? Enter some text: <input type="text" name="txt1" value="Hello" onchange="myF ...

javascriptjqueryhtml

Adaptable Layouts in Bootsrap Grid

I am currently working with Bootstrap Grid. https://i.sstatic.net/giJOI.png One issue I am facing is when I switch back to my mobile screen, I want the layout to adjust accordingly like https://i.sstatic.net/RYPJm.png I have tried different methods but ...

htmlcssbootstrap-4react-bootstrap

Transferring data from a text area to a table with AngularJS

Creating a C# MVC App with AngularJS My goal is to populate a table with values entered in a text area using Angular. Here is the process: Users input values into a text area like this: A B C When a user clicks a button, a modal window should open and ...

javascripthtmlangularjs

Center text vertically in a textarea

Is it feasible to vertically center the content of a <textarea> within a multi-line search box while keeping everything aligned in the middle? ...

htmlcss

jQuery UI - Add character right before the final element

My slider is set to range from 10 to 1000 with increments of 20 (10-30-50, etc). I'm looking to add a character before the value on the last step (1000). Currently, it shows values like "560 kr/h" or "400 kr/h", but I want it to display ">1000 kr ...

jqueryhtmljquery-uislideraddition

The hovering of the mouse over a dropdown menu causes a division on the page to shift

Creating a website with a dropdown menu and slider division can be tricky. When hovering over the menu, the submenu displays but causes the slider division to shift down. Does anyone have suggestions on how to fix this issue? Below is the code: <html& ...

htmlcss

The project is experiencing difficulties in loading the Module CSS

Currently, I am working on a React module and have set up a React project to demonstrate the functionality of this module. Initially, everything was working smoothly until I encountered an issue with the webpack configuration related to the CSS loader. { ...

cssreactjsnpm

Graphics distorting on android devices when implementing createjs and canvas technology

I have a question regarding the performance of my game that I'm developing to work on both desktop browsers and mobile devices. Using HTML5 and CreateJs, most of the game is being drawn on a canvas element. While everything runs smoothly on a standar ...

androidhtmlcordovahtml5-canvascreatejs

What are some ways I can customize the appearance of a canvas element?

After discovering a canvas animation, I decided to customize it for my own needs. However, due to the fact that a canvas and its shapes are not DOM elements, I am struggling to style it properly. You can view my current progress here. When you hover over ...

htmlimagecanvasmask

Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

Just a heads up: below is an example with code of how I envision my interface to look, but I'm not sure if it's valid? I've been trying to create an HTML5/CSS interface that resembles the MIRC fullscreen layout (check out the image below) a ...

csshtml

Can the SVG def element be modified?

In my SVG file, there is a defs element structured as follows: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()"> <defs> <linearGradient id="grad" x1="174.6 ...

javascripthtmlsvg

Utilize Python and Selenium to post a comment on Instagram

Having some trouble with submitting comments on Instagram using Python and Selenium. The comment box on the Instagram web page has the following structure: <textarea aria-label="Añade un comentario..." placeholder="Añade un comentario..." class="Ypff ...

pythonhtmlseleniuminstagram

Addressing see-through box styling in CSS

When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this? .parent { display: inline-block; ...

htmlcssdjangoopacity

Ensure that the inner div has a height of 100%

Can someone help me troubleshoot my HTML code? <div id="container"> <div id="left-container"> </div> <div id="right-container"> </div> </div> Although the container is set to 100% height, the #left_con ...

htmlcss

Getting the x-axis points on Google charts to start at the far left point

I have integrated the Google API for charts into my application and am using multiple charts on the same page. However, I am facing an issue with setting padding for the charts. When I include more data points, the chart area occupies more space in the div ...

javascriptcsschartsgoogle-visualizationpadding

Tips for showcasing an image prior to uploading within a personalized design input file

I am facing an issue with displaying multiple images inside custom style input file labels before uploading them to the database. Currently, the script I am using only displays one image at a time and in random positions. My goal is to have each image ap ...

javascriptjqueryhtmlcss

Insert placeholder text without access to the input field

Is it possible to activate a placeholder in a component that is outside of the current context? For example: <foreign-component [config]="someConfig" placeholder="somePlaceholder"></foreign-component> The <foreign-compo ...

cssangular

Creating a HTML and JavaScript carousel without relying on the animate function

I am currently facing some challenges with building a custom slider. While it moves forward smoothly using CSS animation, I'm struggling to implement a backward motion with an animation. It seems like I need to loop through the slides and try a differ ...

javascriptjqueryhtmlcss