Struggling to set up a css3 keyframe slide effect and seeking help to properly configure it. Check out the Fiddle for more details

I am looking to create a responsive version of the animation in this fiddle (link provided below). I want the animation to be 100% wide and have a height of 500px. However, when I adjust the width to 100%, it causes issues at the end of the animation. Can someone guide me on how to create a simple animation like this that works across browsers, seamlessly display with a width of 100%, and allows for adjustable height using media queries?

Here is my code: http://jsfiddle.net/hkJsm/

<div id="logo"></div>

CSS:

@-webkit-keyframes slide {
from{
    background-position:575px;
}
to{
    background-position:1725px;
}
}

#logo{
text-align:center;
width:575px;
height:200px;
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
 }

Thank you for your assistance!

javascriptjqueryhtmlcssresponsive-design

Answer №1

I found your question to be quite intriguing, especially when it comes to manipulating images in CSS3. It appears that the issue originated from the inability to manually flip images, so I took the liberty of cropping the image accordingly. You can see the updated version working smoothly in this demonstration. The problem was resolved by adjusting the background-position property within the animation:

background-position:1725px;

was changed to

background-position:1645px;

Check out the visual representation of the image conversions below.

From this image

To this revised version

Answer №2

Try out these suggestions:

Experiment: http://jsfiddle.net/abc123/2/

CSS

 .wrapper{
     background:url(http://example.com/images/bg.png);
     animation-name: slide 10s linear infinite;

 }
 #header{
     min-height: 100px;
 }

HTML

  <div class="wrapper"><div id="header"> </div></div>

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

Exploring the world of form interactions in Angular: A guide to creating dynamic element communication

I have created a form using Angular, and I want to display a specific value in my input field when an element is selected from the dropdown. Additionally, since the values in the dropdown are fetched from a server, I want to show a corresponding label for ...

javascriptangular

Passing asynchronous data to child components using an object in Angular6

Currently, I am facing an issue with displaying data retrieved from a server using Angular 6, Rxjs, and Chartjs. When utilizing local mock data, everything works perfectly fine. However, when fetching data from the server, the charts render as blank becaus ...

javascriptangularrxjsobservableangular6

The Vue Watch feature fails to trigger when incorporating axios

Hello everyone, I am facing an issue with my code that involves fetching data from a database using axios. The problem is that the watch function is not triggering in the .then() block. Below is the snippet of code I am currently working with. Thank you ...

javascriptvue.js

Incorrectly loading static images in React SSR

I am currently working on a React SSR app and my folder structure looks like this: https://i.sstatic.net/RA2H2.png My static express middleware successfully handles static files and images in the tag on the client side: https://i.sstatic.net/Zhzf2.png ...

javascriptnode.jsreactjsexpressserver-side-rendering

Struggling to connect to Node/Express Backend

I have developed a backend service using Node and Express. However, I am encountering an issue where none of the routes for this application are being accessed. Despite expecting to see an error message in the console if the routes were misconfigured, no s ...

javascriptnode.jsexpress

Exploring the Prototype-based programming concept in JavaScript

I am determined to deepen my understanding of JavaScript and explore what lies beneath its surface. While I have delved into various guides on the Object-Oriented Paradigm with Prototypes in JavaScript, I am struggling to comprehend how this paradigm diffe ...

javascriptoopprototype

Using Regular Expressions to Validate Emails: Ensuring Only One "@" Sign Appears

In my Angular 2 application, I have been using the following regular expression to validate email addresses: ^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)$ Although the validation is successful for most cases, it fails when th ...

javascriptregexangularvalidationemail

Avoiding scrolling when a button (enveloped in <Link> from react-scroll) is pressed in React

Currently, I am implementing the smooth scroll effect on a component using react-scroll. However, adding a button inside the component to create a favorite list has caused an issue where the smooth scroll effect is triggered upon clicking the button. Is ...

javascripthtmlcssreactjs

Handing off the Event Object to a Function in JQuery

Usually, I'm able to send an event to a nameless Jquery function like this: $(".click_me").on("click", function(e) { e.preventDefault(); }); But what if I want to eliminate the anonymous function and still pass the event to it: function onClickMe ...

jqueryfunctionparameters

Is Safari 9 having trouble playing HTML5 videos with binary sources?

Currently, I am developing a web project using NodeJS that involves video upload and player functionality. The uploaded videos are stored in mongodb in binary form, and can be retrieved through the API at localhost/api/media/:id : /* retrieving media from ...

node.jshtmlmongodbvideosafari

Guide to Display Three.js Code Suggestions in an HTML Document

I've exhausted all possible options to enable Three.js intellisense, but it simply refuses to appear. I've tried every known method in the manual. What's the missing piece here? Please share your insights. <!DOCTYPE html> <h ...

htmlthree.jsintellisense

When using an HTML Select element with options loaded through Ajax, the desired item for selection is not being automatically selected

This is a strange situation. Collaborating with others and using sample code, I have created a routine that utilizes AJAX to pass a value from one select to a PHP file. The PHP file then generates a second select with options, each option designed to check ...

javascriptphpajax

Troublesome tab key function in FireFox causing navigation issues

I'm facing an issue with the tab key focus on links in FireFox. Strangely, it's working fine in Chrome but in FireFox, it keeps looping within one element. For better understanding, I have created a demo showcasing this behavior specifically in ...

htmlcss

Navigating through history using the pushState method and incorporating back and forward buttons

I am trying to implement back and forward buttons functionality with this ajax method The code is working well, and the URL in the browser is changing as expected However, when I click on the back and forward buttons, nothing happens (function(){ ...

javascriptajaxhtmljquery

Use Jquery to iterate over the AJAX JSON response and add it to a collection of element identifiers

I have come across some similar inquiries, but none quite fit my needs. Currently, I am utilizing AJAX to obtain real-time updates on property availability. I have successfully received the response and can view it in the console log. However, I am unsure ...

jqueryajax

Error message: 'Encountered issue with react-router-V4 and the new context API in React

Currently, I am experimenting with the integration of React Router V4 alongside the new React context API. Below is the code snippet I am working with: class App extends Component { static propTypes = { router: PropTypes.func.isRequired, ...

javascriptreactjsreact-router-v4react-context

Starting point for Angular 2 app setup

What is the best way to handle data initialization in my app? For instance, if a user logs in and presses F5, I need to retrieve the current user data from the server before any other queries are executed, such as getting the user's orders. In Angular ...

javascriptangularjsangular

Is it advisable to include the `engine` attribute in the packages.json file for a web browser library project?

When creating a JS library project meant for browser use, do I need to include the engines field in the packages.json file? ...

javascriptnpm

The jquery.blockUI plugin seems to be malfunctioning

Trying to disable a simple div: <div id="MyDiv"> </div> Here is the code I used: $('#MyDiv').blockUI({ message: '<h1>This has been blocked!</h1>', css: { border: '3px solid #a00' } }); Issue ...

jqueryjquery-uihtmljquery-pluginsjquery-blockui

When using Laravel Mix with Jquery and Materialize, you may encounter the error message "Uncaught TypeError: $(...).collapsible is not a function"

Recently, I started a new Laravel Mix project with Materialize CSS and needed to import jQuery. Everything seemed to be working fine. The compilation process was successful, and I could even locate the function in the app.js file. However, when I tried to ...

jquerylaravelmaterialize