What could be causing my animation element to not be aligned in the center?

I'm having trouble figuring out why the car in my animation isn't swerving around the middle line. It seems to be veering a bit off to the right?

.car {
  width: 40px;
  height: 60px;
  background: #f00;
  left: 50%;
  transform: translate(-50%, 0);
  animation: swerve 2s linear infinite;
  top: 10%;
  position: absolute;
}
@keyframes swerve {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(50%, 0);
  }
}
.road {
  width: 200px;
  background: black;
  height: 500px;
  display: block;
  position: relative;
}
.road-middle {
  border: 1px dotted #fff;
  transform: rotate(90deg);
  display: block;
  position: relative;
  top: 200px;
}
<div class='road'>
  <span class="road-middle"></span>
  <div class='car'></div>
</div>

Additionally, is there a way to adjust the length of the middle line's border?

htmlcssanimation

Answer №1

When using left:50%, make sure to calculate the width of the car. To resolve this issue, you can adjust the animation as shown below:

.car {
    width: 40px;
    height: 60px;
    background: #f00;
    left: 50%;
    animation: swerve 2s linear infinite;
    top: 10%;
    position: absolute;
}


@keyframes swerve {
0% {
transform: translate(-50%, 0);
}
  
    25% {
transform: translate(-100%, 0);
}
      

75% {
transform: translate(0%, 0);
}
  
    100% {
      transform: translate(-50%, 0);
    }
}

.road{
  width:200px;
  background:black;
  height:500px;
  display:block;
  position:relative;
}

.road-middle{
  border: 1px dotted #fff;
    transform: rotate(90deg);
    display: block;
    position: relative;
    top: 200px;
}
<div class='road'>
  <span class="road-middle"></span>
<div class='car'></div>

</div>

To manage the length of the road-middle component, follow these steps:

.road-middle{
  border: 1px dotted #fff;
  display: block;

  /* eliminate the rotation */

  /*position the line */
    position: absolute;
    left:calc(50% - 1px);

  /*adjust the line length */
  height:200px;
  top:150px;
}


.car {
    width: 40px;
    height: 60px;
    background: #f00;
    left: 50%;
    animation: swerve 2s linear infinite;
    top: 10%;
    position: absolute;
}


@keyframes swerve {
0% {
transform: translate(-50%, 0);
}
  
    25% {
transform: translate(-100%, 0);
}
      

75% {
transform: translate(0%, 0);
}
  
    100% {
      transform: translate(-50%, 0);
    }
}

.road{
  width:200px;
  background:black;
  height:500px;
  display:block;
  position:relative;
}

.road-middle{
  border: 1px dotted #fff;
    display: block;
  
  /* eliminate the rotation */
  
  /*position the line */
    position: absolute;
    left:calc(50% - 1px);
  
  /*adjust the line length */
  height:200px;
  top:150px;
}
<div class='road'>
  <span class="road-middle"></span>
<div class='car'></div>

</div>

Answer №2

the positioning of the .car in relation to the .road is off-center, you can adjust this by updating the following CSS code for the .car:

.car{
    left:0;
    right:0;
    margin:0 auto;
}

If you want to change the length of the dashed line representing the center of the road (road-middle), without rotating it, you can set the width to 0 and height to 100%. Here's the updated CSS for the .road-middle:

.road-middle{
    border: 1px dotted #fff;
    display: block;
    position: relative;
    top: 0;
    width:0px;
    height:100%;
    left:0;
    right:0;
    margin:0 auto; 
}

Check out the sample below:

.car {
  width: 40px;
  height: 60px;
  background: #f00;
  left: 0;
  right:0;
  margin:0 auto;
  transform: translate(-50%, 0);
  animation: swerve 2s linear infinite;
  top: 10%;
  position: absolute;
}
@keyframes swerve {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(50%, 0);
  }
}

.road {
  width: 200px;
  background: black;
  height: 500px;
  display: block;
  position: relative;
}
.road-middle {
  border: 1px dotted #fff;
  display: block;
  position: relative;
  top: 0;
  width:0px;
  height:100%;
  left:0;
  right:0;
  margin:0 auto;
 }
<div class='road'>
  <span class="road-middle"></span>
  <div class='car'></div>
</div>

Answer №3

Eliminating these 2 lines results in:

 transform: translate(-100%, 0); 
 animation: swerve 2s linear infinite;

Your block will not be centered..

To fix this issue, replace it with (or correct your initial problem)

@keyframes swerve {
  0% {
    transform: translate(-100%, 0);
  }
  50% {
    transform: translate(0%, 0);
  }
}

Answer №4

By setting left: 50%, you can align the leftmost edge of your element with the center. To vertically center your element within the container, you should apply a negative margin equal to half of the element's width. This adjustment will shift the element slightly to the left. For example, adding margin-left: -20px; to your car will result in it being centered:

.car {
  width: 40px;
  height: 60px;
  background: #f00;
  left: 50%;
  transform: translate(-50%, 0);
  animation: swerve 2s linear infinite;
  top: 10%;
  margin-left: -20px;
  position: absolute;
}
@keyframes swerve {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(50%, 0);
  }
}
.road {
  width: 200px;
  background: black;
  height: 500px;
  display: block;
  position: relative;
}
.road-middle {
  border: 1px dotted #fff;
  transform: rotate(90deg);
  display: block;
  position: relative;
  top: 200px;
}
<div class='road'>
  <span class="road-middle"></span>
  <div class='car'></div>
</div>

Answer №5

Since the width of the mentioned element is set to 40px and the car has been shifted 50% to the right, it means that the car is now positioned at 50% + 40px to the right. You can test the code below to see the result.

.car {
  width: 18%;
  height: 60px;
  background: #f00;
  left: 41%;
  transform: translate(-50%, 0);
  animation: swerve 2s linear infinite;
  top: 10%;
  position: absolute;
}
@keyframes swerve {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(50%, 0);
  }
}
.road {
  width: 200px;
  background: black;
  height: 500px;
  display: block;
  position: relative;
}
.road-middle {
  border: 1px dotted #fff;
  transform: rotate(90deg);
  display: block;
  position: relative;
  top: 200px;
}
<div class='road'>
  <span class="road-middle"></span>
  <div class='car'></div>
</div>

Answer №6

left: calc(50% - 20px);

Make sure to take the car's width into account when calculating positioning.

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

Ways to trigger the display of an image upon hovering over a button without using inheritance

<div class="a"> <img class="img_c" id="img_id" src="~~"> <div class="b"> <div class="c"> <ul class="d" id="e"> <li ~~~ > </ul> </div> </div> </div> Is there a way to display the ...

css

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...

javascriptcssajaxhtmldom

"Why is it that only one of the two similar spans with onclick event is not functioning properly

Encountering a perplexing issue that has me stumped. Here's the code in question: js: function Test() { alert("test"); } html: <span id='bla' onclick='Test()'> Click me </span> <hr> <span id='bla2& ...

javascripthtmlonclick

Switching PHP include on an HTML page using JavaScript

I've been attempting to modify the content of the div with the ID "panel_alumno" using a JavaScript function that triggers when a button is clicked. My goal is to display a different table each time the button is pressed, but so far, I haven't be ...

javascriptphphtmlmenuinnerhtml

Having issues getting Toggle Switches to function properly in Asp.Net Webforms

I am in need of a toggle switch that can be toggled on or off depending on the user's preference. Here is a CSS code snippet that I have come across in various examples: .switch { position: relative; display: inline-block; width: 60px; hei ...

htmlcssasp.netcheckboxtoggle

The issue with clip-path not functioning correctly in Safari persists

My list of clipped elements is causing an issue when using the CSS3 clip-path method to clip an image into an SVG path. The clipping works perfectly, but in Safari (V 12.1.4), the position of the clipped element changes with each box. The element ...

htmlcsssvgsafariclip-path

Tips for creating dynamic animations in an opencart dropdown menu

Currently, I am in the process of enhancing my ecommerce website using OpenCart and I have been trying to incorporate a simple animation for the dropdown menu. However, despite applying the transition properties in the code snippet below, it seems that the ...

cssdrop-down-menuopencartdropdownopencart2.x

Is window.getComputedStyle not functioning as anticipated?

Here is a function I created to determine the width and height of a text: function size_calculation(word,fontSize) { const div = document.body.appendChild(document.createElement('div')); div.textContent = word; div.style.cssText = ` fo ...

javascripthtmlcss

triggering a button click event in HTML

Below is the creation of a div: <div class="area1"> </div> By using AJAX, I was able to alter the HTML for the aforementioned div with this call: $('#abutton').click(function(e) { e.preventDefault(); ...

htmljqueryajax

Exploring the process of retrieving outcomes from Node.js within a Knockout ObservableArray

Below is the Node.js code snippet I have: var http = require('http'); var port = process.env.port || 1337; var MovieDB = require('moviedb')('API KEY'); MovieDB.searchMovie({ query: 'Alien' }, function (err, res) { ...

javascripthtmlnode.jsknockout.js

How to style a MenuButton's ContextMenu individually with CSS in JavaFX

I've been trying to figure out how to adjust the coordinates of a MenuButton's Context Menu using CSS, but I haven't had any luck so far. I attempted to use the "top" property in CSS, but it didn't work. I also tried using padding, but ...

javacssjavafxdrop-down-menucontextmenu

Conceal a div element using a button through JavaScript

I've been scouring various online resources for solutions, including Stack Overflow and W3Schools, but I haven't had any luck so far. Here's a simplified version of my current code: <script language="javascript"> function remove() ...

javascripthtmlblockdisplay

Unable to trigger click events for marker connected to the end of the line

I need help with the following code. It includes a line with a marker attached to the end. I have written click events for both the line and the marker. However, the click event does not work when I click on the marker element, and the cursor properties ar ...

jquerycsssvg

children blocking clicks on their parents' divs

I previously asked a question about a parent div not responding to click events because its children were blocking it. Unfortunately, I couldn't recreate the issue without sharing a lot of code, which I didn't want to do. However, since I am stil ...

javascriptjqueryhtmlcssjquery-templates

Overflow-y SweetAlert Icon

Struggling with a website modification issue where using Swal.fire(...) causes an overflow problem affecting the icon rendering. How can this be fixed? Here is the custom CSS code in question: * { margin: 0px; padding: 0px; font-family: &ap ...

javascripthtmlcsssweetalert

Height and left properties do not work with CSS transitions

I am currently working on creating a custom toolbox. I want the toolbox to slide in from the left when opened, so I added a transition from left=-1500px to left=0;, which works perfectly. However, when I attempted to add a minimization feature by adding a ...

htmlcss

How can you verify a phone number input?

I have a phone number field in my form that needs validation. The conditions are that the numbers may be 8 digits or 10 digits long, otherwise an error message should be displayed. Is this code snippet correct? <input class="form-control" name="phone_n ...

htmlvalidation

Show images aligned in the center with proper positioning

img { vertical-align: middle; } .right { ??? } <img align='right' class='right' src='images/online_icon.png' border="0" width=8/> I am trying to position images on the right side while keeping them vertically aligned ...

html

Retrieve the browser version of a client using C# (When Internet Explorer Compatibility mode is activated)

Is there a way to retrieve the actual version of the client's browser from C# code? Using Request.Browser or HTTP_USER_AGENT provides details, but in Internet Explorer (IE), when compatibility mode is enabled, it always returns IE 7 regardless of the ...

c#htmlasp.netinternet-explorer

Issue with Jquery: Checkbox fails to get checked in Internet Explorer 7

Having trouble with checking a checkbox, I've attempted the following steps: $('#someId').attr('checked','checked'); $('#someId').attr('checked', true); Both of these methods are effective for I ...

javascriptjqueryhtml