Create an animated sequence of an image moving from the left side of the screen to the right

Having some trouble creating smooth animations using CSS3.

Take a look at my demo here: http://jsfiddle.net/fyanz92/m98jy/2/

Here are the snippets from my code:

.loading {
    width: 250px;
    height: 50px;
    background: #CEE7D3;
    margin: auto;
    z-index: 1005;
    top: -3px;
    padding: 15px;
    border-radius: 0px 0px 5px 5px;
    margin-top: -2px;
    border: 1px solid #73AD7F;
    box-shadow: 0px -2px 6px -4px #000 inset;
}
.mobil {
    position:absolute;
    -webkit-animation: gerakmobil 5s;
    animation: gerakmobil 2s infinite;
}
@-webkit-keyframes gerakmobil {
    0 % {
        top:0px;
        left:-50px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
    25 % {
        top:0px;
        left:30px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
    50 % {
        top:0px;
        left:100px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
    75% {
        top:0px;
        left:100px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
    100 % {
        top:0px;
        left:300px;
        png-shadow:5px 5px 5px #222;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 5px #222)
    }
}

However, I'm not satisfied with how choppy and rigid the animation looks. My goal is to create a car animation that smoothly enters from the left side, moves towards the right, pauses briefly in the middle, and then repeats infinitely.

htmlcsscss-animations

Answer №1

Your fiddle has been successfully updated to meet your requirements. I have identified errors in your code and made necessary adjustments to the CSS.

.loading {
    position: relative;
    width: 250px;
    height: 50px;
    background: #CEE7D3;
    margin: auto;
    border-radius: 0px 0px 5px 5px;
    border: 1px solid #73AD7F;
    box-shadow: 0px -2px 6px -4px #000 inset;
    overflow: hidden;
}
.mobil {
    position: absolute;
    height: 50px;
    left: -50px;
    -webkit-animation: gerakmobil 5s;
    animation: gerakmobil 5s;
}

img{
    height: 100%;
}

@-webkit-keyframes gerakmobil {
    0% {left: -50px;}
    50% {left: 50%;}
    100% {left: 100%;}
}

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

Upon utilizing the .append() method to add a new row to a table through jQuery, I found that clicking on this freshly added row caused jQuery to

When clicking on a row of a table in my code, a corresponding page is opened for every tr using jQuery. The problem arises when I use the .append() method to add a new tr via jQuery after calling ajax: the new tr gets added at the end of the table but the ...

htmljquerydjango

Updating the jQuery mobile webpage

I have set up a small demo with two pages - the Home page and the Team 1 page. By clicking on the navigation menu, you can navigate to the Team 1 page from the Home page. However, if you are already on the Team 1 page and click on the Team 1 button again ...

javascriptjqueryhtmljquery-mobile

PHP page Not Refreshing Properly Without Ajax

I am in need of assistance. Could someone please provide me with a code that has been thoroughly reviewed and tested for errors to address my issue? The program, 22.php, consists of a form. The desired functionality is for the user to enter information and ...

javascriptphpjqueryhtmlajax

Clearing blank spaces in css grid - a step-by-step guide

Can anyone help me remove these unwanted indentations in my grid layout without using JavaScript? I've tried using grid-auto-flow: column, but it's not working as expected. Here is a picture illustrating the issue, and here is what I am trying to ...

htmlcsscss-gridgrid-layout

Is there a way to modify the margin of items in my table affected by the Angular Material ng-tns class without encountering a different variant of ng-tns when using CSS for the adjustment?

In my Angular project, I am utilizing Angular Material and material table components. One issue I have encountered is that all the text in my table seems to have a 10px margin applied at the top and bottom due to classes like .ng-tns-c5-1 or .ng-tns-c6-1, ...

htmlcssangularangular-material

Issue with nested grid layouts within the 960 grid system

I recently started working on a personal hobby website and decided to utilize the 960 css grid system for organizing my HTML elements on the page. After grasping the basic concept, I went ahead and created a preliminary version of the website, which is ho ...

css960.gs

What is the process to enable mandatory validation after a change in input in Angular 4?

Currently, I am working on a project using Angular 4. One of the tasks I need to achieve is validation. <input [(ngModel)]="someModel" required placeholder="some placeholder"/> The validation triggers immediately, but I want it to only trigger aft ...

htmlangulartypescriptrequired

Verify whether the form inputs are necessary or optional when utilizing a specific directive

Hello, I am trying to determine if all the necessary fields are filled out in a form using jQuery only. I have attempted this: $('#form').find('input, select, textarea').each(function(){ if(!$(this).prop(&apo ...

javascriptjqueryhtmlangularjs

Padding to enhance the appearance of anchor tags

Currently, I have an asp.net page with the following code displayed below: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

htmlcssasp.netpadding

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

cssscrollbarhtml

What is the method for locating the second Tuesday of every month, beginning on December 1st?

I have successfully implemented functionality to show/hide a button based on the time range, but I am now looking for a way to also include a check for every second Tuesday of the month starting from December 1st. Any suggestions on how I could modify my ...

javascripthtml

Bootstrap navbar problem: struggling to adjust padding for image and navigation links

Can anyone help me understand why my navbar isn't displaying padding on the left and right as specified in my CSS? I've been trying to figure it out for a while now, but I'm not sure if I need to remove the div-container fluid or if I'm ...

htmlcssbootstrap-5

The filtering function using jQuery and ajax

Hello, I'm currently working on a website that compares the prices of domain names. I could use some assistance with a specific function that I'm trying to implement. At the moment, there is a section on the website where users can click on dif ...

javascriptphpjqueryhtmlajax

Styling images with unique shapes using CSS

I'm attempting to design a unique shape using only CSS so that it resembles the following: image of custom image shape I've been experimenting with CSS3 Mask, but unfortunately the support isn't broad enough as I need it to work in IE 10, Fi ...

htmlcsssvgsass

stopPropagation() halts the propagation in the opposite direction

I encountered an issue while attempting to create a non-clickable div. While it does stop propagation, it doesn't prevent what should be stopped and allows things that shouldn't be clickable. js //screen has set stopPropagation $("#smokeScree ...

javascriptjqueryhtml

How to activate a media query in response to user interaction using JavaScript

My responsive web page has various designs for different screen sizes, implemented using @media queries. I am interested in allowing users to manually adjust the design for smaller or larger screens without actually changing the screen size. Is there a wa ...

javascriptcssresponsive-designmedia-queries

How to ensure product images keep their size and aspect ratio in Weebly

Currently, I am running into issues while using Weebly to create an eCommerce website. The problem lies with the product element images - they seem to be appearing twice the size of the original upload. Unfortunately, I do not have access to any other imag ...

javascripthtmlcssweebly

Entrance to Dom crafted through the use of iframes

Once upon a time, there was a website with an economic calendar. Here is the scenario: I open the page in my browser, like this one: I scan through the data on the page. If I find something interesting, I click a button to save all the html content, in ...

javascripthtmlgoogle-chromeiframegoogle-chrome-extension

Tips on expanding the space between words in a scrolling "marquee" text

Looking for some assistance with my jQuery project involving a horizontal scrolling "marquee" text. I am currently trying to adjust the size of the gap between the phrases in the marquee. Here is an example with the phrase "HEY THERE". jQuery(document ...

javascripthtmljquerycss

Centered inline-block divisions

I've been coding for a number of years now, but I've recently started learning CSS. I'm currently facing an issue and need some help. I want to place two divs next to each other and center them. Here's the code I'm using: HTML: & ...

htmlcss