Guidelines for implementing a seamless translation effect with CSS3

CSS:

.horizon {
    position: absolute;
    top: 380px;
    width: 1800px;
    height: 50px;
    background: url(images/road.png) repeat-x;
    -webkit-animation-name: prop-600;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes prop-600 {
    0% {
        -webkit-transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(-1000px);
    }
}

The animation is currently stopping at 100% and restarting. I want the image to continuously move from left to right without any pauses.

Here is the fiddle:http://jsfiddle.net/rVAtz/

I used a square element in the fiddle instead of an image for demonstration purposes.

If anyone can assist me in achieving this effect using JavaScript or jQuery, I would appreciate it. Thank you in advance.

javascripthtmlcss

Answer №1

Instead of using transforms, remove all transform and transition properties and implement the following code:

var startTime = +(new Date()),
    horizon = document.getElementsByClassName('horizon')[0];
(function update(){
    var dif = (new Date()).getTime() - startTime;
    dif *= 0.05;
    horizon.style.left = (100 - dif)+'px';
    requestAnimFrame( update, horizon );
})();

I opted for using requestAnimationFrame, although you have the option to use setTimeout. fiddle: http://jsfiddle.net/rVAtz/10/

Answer №2

There exists a unique property for achieving this effect, however, the specifics escape me at the moment. Nevertheless, you can create your own animation using the following code:

0% {
  -webkit-transform: translateX(0px);
}
50% {
  -webkit-transform: translateX(-1000px);
}
100% {
  -webkit-transform: translateX(0px);
}

UPDATE: Ah! The missing piece is 

-webkit-animation-direction: alternate;

Check out these demos: http://jsfiddle.net/rVAtz/4/ and another approach here http://jsfiddle.net/rVAtz/5/

Another update: To implement this effect, apply the following CSS to the square element:

-webkit-transition: -webkit-transform 1s linear; /* You can adjust duration as needed */
-webkit-transform: translateX(100px);

Next, use this jQuery snippet:

var position = 100;
(function animateSquare(){
  position -= 100;
  $('.horizon')
  .css('transform','translateX('+position+'px)')
  .one('webkitTransitionEnd',animateSquare);
})();

Demo without any libraries (pure JavaScript):

var position = 100,
    horizon = document.getElementsByClassName('horizon')[0],
    binded = false;
(function animateSquare(){
  position -= 100;
  horizon.style.webkitTransform = 'translateX('+position+'px)';
  if (!binded) {
    horizon.addEventListener('webkitTransitionEnd',animateSquare,false);
    binded = true;
  }
})();

Check it out in action on this fiddle: http://jsfiddle.net/rVAtz/8/

Answer №3

I'm not certain if this aligns with your needs

Link to Code Example

@-webkit-keyframes prop-600 {
    0% {
        -webkit-transform: translateX(0px);
    }
    50% {
        -webkit-transform: translateX(-100px);
    }
}

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

Choosing an element within a table following a different element using Selenium

On a webpage, a table displays various plain text elements (filenames) on the left side and hyperlinks to PDF files on the right: Red report Download PDF Blue report Download PDF Green report Download PDF These pages have multiple entries, and t ...

htmlselenium

Why is it that lists always begin outside of the enclosing element?

I've always found this incredibly frustrating. Why do lists behave this way? When you set the margin and padding to 0, you would expect them to align normally with the surrounding text on the left, right? But no. That's where the text within the ...

htmlcsshtml-lists

Angular Material's <mat-select> tag allows for the inclusion of an <input> element within it

I am attempting to place an input element inside the mat-select tag of the Angular Material element. However, I am facing an issue where I cannot input any text into the input field inside the select element. Below is the code I am using to search for elem ...

htmlangulartypescriptbootstrap-4angular-material

Formatting decimals with dots in Angular using the decimal pipe

When using the Angular(4) decimal pipe, I noticed that dots are shown with numbers that have more than 4 digits. However, when the number has exactly 4 digits, the dot is not displayed. For example: <td>USD {{amount| number: '1.2-2'}} < ...

javascriptangulartypescript

PHP code to insert a advertisement div after every 5 rows of results

Is there a way to dynamically insert a div after every fifth row on a result page? I am currently using a script that displays 15 rows from a database with each pagination. Here is my complete script: <?php $sql = "SELECT COUNT(id) FROM table"; ...

phphtmlmysql

React: Remember to always retain the initial four characters when making changes

I have implemented an input component for phone numbers using the react native phone input library, which automatically adds the international code. However, I am facing an issue where the international code +234 is deleted when the user presses the back b ...

javascriptreactjsreact-native

Is it possible to modify a prop in a functional component?

I am working on a functional component that has the following structure: export const Navbarr = ({items}) => { const [user, error] = useAuthState(auth); const [cartItems, setCartItems] = React.useState(0); const fetchUserCartItems = async() =&g ...

javascriptreactjs

Issue with Basic jQuery Demonstration (Failure to Conceal Item)

Below is a jQuery example where an element should be hidden, but it's not working as expected: <html> <head> <script src="../lib/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $ ...

javascriptjqueryhide

Guide on how to initialize a variable in Express.js within a conditional statement in Node.js

Trying to create a variable based on a conditional statement, but even with simple code I am unable to retrieve the new variable. Here is my code: exports.productPatch = (req, res, next) => { const id = req.params.productId; const image = req.body.p ...

javascriptnode.jsexpress

Can you iterate through each element that matches those in a different array?

As a beginner in Javascript, I may stumble upon some obvious errors, so please bear with me. My goal is to iterate through two arrays and perform a loop for each element that exists in both arrays. Currently, this is my code: if(obtainedCards.some( sp =& ...

javascriptarraysforeach

Stop the event propagation when the back button is clicked

While utilizing ons-navigator, I am looking to customize the function of a particular element at a certain stage. Employing the onClick handler has allowed me to successfully trigger this function. However, upon exiting the onClick handler, the navigator ...

javascriptonsen-ui

The printed Bootstrap web page is being truncated

I have a unique dynamic webpage created with Bootstrap that needs to be printable. I am implementing media queries for styling the page when printing: /** Custom Print Styles **/ @media print { header, .menu, footer { display: none; ...

jqueryhtmltwitter-bootstrapcss

Issue with Build System CTA's/Callback function functionality not operational

I have encountered an issue with my build/design system. Although everything works fine during development, when I publish my package and try to use the callback function, it does not return the necessary data for me to proceed to the next screen. I tried ...

javascriptreactjstypescriptnpm

An issue arose when attempting to submit data from an AngularJS form

I am having an issue with my AngularJS form that is supposed to post data to a Scalatra servlet. Unfortunately, when the form is submitted, I am unable to retrieve any form parameters in my Scalatra servlet. Here is a snippet of my code: AngularJS $scop ...

javascriptscalaangularjsscalatra

Unable to alter the css of a jQuery object

I have been attempting to modify the CSS of two child elements of a specific element using Backbone and jQuery. However, my code does not seem to be working as expected. I suspect that the issue lies in distinguishing between a DOM element and a jQuery obj ...

javascriptjquerycssbackbone.js

Is it possible to trigger a Bootstrap 5.2 Popover within an "if" statement?

As part of my input validation process, I am utilizing popovers. However, I am struggling with the syntax to make it work as intended. https://jsbin.com/sufitelodo/1/edit?html,js,output The JSBin provided serves as the foundation for this issue. I am un ...

javascripttwitter-bootstrapbootstrap-5popover

Navigating within an entity

Currently working on coding with javascript & react. There is a specific object called "rates" that I am attempting to iterate through: { "M": { "lab": { "S": "50%" }, "dme": { "S": "75%" }, ...

javascriptreactjsfunctionobjectdata-structures

Dynamically setting the height of elements using jQuery with incremental values

My Objective: I am trying to dynamically adjust the height of each li element within a ul.container. The goal is to find the tallest li, add 25px to its height, and then apply that new height to all other li elements in the container. This calculation ne ...

javascriptjquery

XMLHttpRequest request shows blank result

Issue: After clicking the submit button on my HTML form, a JavaScript function is called with an Ajax request. The request returns successfully, but the result disappears quickly. I'm curious if I may be overlooking something here (besides jQuery, w ...

javascriptajaxxmlhttprequestforms

Capturing mouse coordinates from hover events in Highcharts Gantt using the highcharts-react library

Currently, I am utilizing the official React highcharts wrapper to create a Gantt chart. My goal is to obtain precise mouse coordinates from a mouse-over event and utilize them for a custom tooltip. For instance: https://stackblitz.com/edit/react-c5mivs ...

javascriptreactjshighcharts