CSS Sprite Animation Technique

Hello there, I've been attempting to create a simple animation using CSS and a sprite but for some reason it's not working. Can anyone help me figure out what I'm missing? I have created a sample on JS Fiddle.

Could someone please explain why this animation isn't functioning properly?

Click here to view the JS Fiddle sample

<body>
    <div id="wrapper">
       <div id="bike">

       </div>
    </div>
</body>

div#wrapper {
    width: 64px;
    height: 80px;
    background-color: #c0b898;
    margin: auto;
}
@-webkit-keyframes running {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: -320px;
    }
}
#bike{
    width: 64px;
    height: 80px;
    background-image:url('http://i.imgur.com/WVPnShz.png');
    -webkit-animation: running 1s steps(6, end) infinite;
}
htmlcssanimationsprite

Answer №1

If you encounter issues with your animation name, simply rename it and the problem should be resolved.

#cycle{
    width: 64px;
    height: 80px;
    background-image:url('http://i.imgur.com/WVPnShz.png');
    -webkit-animation: myAnim 1s steps(6, end) infinite;
}

@-webkit-keyframes myAnim {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: -320px;
    }
}

For reference, check out this example: http://jsfiddle.net/CmF6A/2/

Answer №2

Check out this awesome JSfiddle I found for you!

I made some enhancements to your existing fiddle.

http://jsfiddle.net/CmF6A/5/

#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
animation:myfirst 5s;
      -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    from {background-position:0px;}
    to {background-position:-320px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{ 
    from {background-position:0px;}
    to {background-position:-320px;}
}

Answer №3

Discover a helpful tutorial on how to craft sprite sheet animations.

Check out the tutorial

.animatedDiv {
    width: 820px;
    height: 312px;
    background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
    -webkit-animation: play 2s steps(48) infinite;
    -moz-animation: play 2s steps(48) infinite;
    -ms-animation: play 2s steps(48) infinite;
    -o-animation: play 2s steps(48) infinite;
    animation: play 2s steps(48) infinite;
}
@-webkit-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-moz-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-ms-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-o-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}

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

When a div is clicked, the text inside the button changes. If another div is clicked, the previous text is reset

I am seeking a solution for changing the text of a button within three columns when a specific 'advice-card' div is clicked on. The text should change to 'Hide' for the clicked div, and the other buttons should switch back to 'Show ...

javascripthtmljquerycss

Preventing the submission of form post values by using jQuery remote validation

     Within my form, I have incorporated two submit buttons (save & exit, next) and implemented remote email address duplication checks. Everything is functioning properly, however, upon submission of the form, I am unable to determine which specific s ...

javascriptphpjqueryhtmlcodeigniter-3

Adjusting iframe height based on its source URL using JQuery

Currently, I have implemented a script to adjust the height of YouTube iframes in order to maintain a 16:9 aspect ratio while keeping the width at 100% of the container. The challenge I am facing is ensuring that the script only affects YouTube videos and ...

javascriptjqueryhtmlcssiframe

The video continues playing even after closing the modal box

I am facing an issue with my code where a video continues to play in the background even after I close the modal. Here is the code snippet: <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria- ...

javascripthtmljquerycss

What could be causing the "Cannot POST /api/" error to occur when attempting to submit a form?

Having issues with my basic website and struggling to find a solution. As a complete beginner in this field, I am stuck and need some guidance. Accessing http://localhost:3000/class/create works perfectly fine when running the server. However, trying to a ...

javascripthtmlnode.jsexpressroutes

Is it possible to alter CSS based on the width of the webpage using javascript

We are currently developing a web application that will be deployed on various devices such as mobile phones, iPads, iPhones, and Android. Instead of using user agents to show different views, I prefer having CSS that adjusts based on the screen width. We ...

javascriptjquerycss

What is the best way to include a pound sign in a cfoutput tag?

My challenge is that I need to display the following HTML tags after receiving data from an AJAX query. The problem arises because in cfml, any string starting with a "#" is considered as an identifier, resulting in an error. <cfoutput> ...

htmlajaxstringcoldfusion

Creating a dynamic HTML table in Django by populating it with values from iterative lists

Currently, in the Django framework, I am endeavoring to construct a table using the values stored within a list: List : [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [3, 3, 3, 3]]. The envisioned table layout is as follows: Below is the code snippet that ...

pythonhtmldjango

Tips on switching the positions of two links when they are clicked using jQuery

<div class="applications-wrapper"> <div class="eye" id="onetwo"><a class="fa fa-eye" href="#"></a></div> <div class="bar" id="twothree"><a class="fa fa-bars" href="#"></a></div> </div> My ...

jqueryhtmlcss

Tips for achieving proper styling and formatting of elements in jQuery UI

I've encountered an issue when trying to use jQuery UI after downloading it multiple times. In the examples provided with the download, the UI elements appear perfectly formatted, but when I implement them on my own pages, the styles and formatting ge ...

javascripthtmljquery-uiasp.net

How to dynamically add an HTML element following a specific div class in Typescript and Angular

Is there a way to dynamically insert a component into a div after a specific element with a designated class name using TypeScript? <div class ="{{order.orderId}}"> <div class="enter-here"></div> <other html elements here> < ...

htmlangulartypescript

Can you confirm the mobile type, please? Using JavaScript to display a div only once based on the mobile type

Is there a correct way to determine the type of mobile device I'm using? Are there alternative methods to check for the mobile type? Take a look at my approach in the code below. How can I test this using a tool? Does anyone have insights on checki ...

javascriptjqueryhtmljquery-pluginsdom-events

How can I make a div element match the height of an image and overflow without relying on

Here is the code that I am currently working with: https://codepen.io/allen-houng/pen/ExYKYdq Additionally, you can find a gist of the code snippet below: <div class="parent"> <div class="imageWrapper"> <img class="image" src="imageurl" ...

javascripthtmlcss

The 'getGridMerchantLocationData' function contains duplicate definitions for both DataSource and DataSourceID. Please remove one of the definitions

I am having trouble binding data from a dataset. Can someone review my code and point out where I may be going wrong? The current issue is that it's not binding and throwing an exception: "Both DataSource and DataSourceID are defined on 'getGridm ...

c#asp.nethtml

Error: The request to /api/auth/login in Postman failed unexpectedly

As I am working on developing an app using node.js and express, I encountered an error while making post requests in Postman. Cannot POST /api/auth/login%0A Below are the details of my app's structure along with the files involved: app.js const ex ...

javascripthtmlnode.jsexpresspost

Calculating the Vertical Size of a Component within Django Template Design

Within a div element with a fixed width, I have a p element with the following CSS properties: height:100px; overflow:hidden; I am looking to implement a functionality where a MORE button is displayed if the text within the paragraph overflows and is hid ...

pythonhtmlcssdjango

Tips for handling transparent areas during a hover event

Is there a way to make only the rhombus image respond to hover events? I want to exclude the transparent area, as shown in this picture. <img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first"> #first:hover { -moz-box-shadow ...

htmlcss

Tips for removing a previous file from an 'input type' in HTML5 FileReader

Here is a file input with an associated function: <img id="uploadPreview"> <div id="changeImage">Change</div> <div id="customImage"> <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" / ...

javascripthtmljqueryfilereader

Encountering a NullPointerException while trying to load a resource from a directory that is not within

I'm working with JavaFX and trying to incorporate a CSS file into my scene. scene.getStyleSheets().add(Main.class.getResource("res/application.css").toExternalForm(); An NPE is being thrown. I suspect it's because the css file isn't locate ...

javacssjavafxclasspath

Looking to verify a disabled select element and adjust the opacity of that element when it is disabled

$_product = $this->getProduct(); $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); ?> <?php if ($_product->isSaleable() && count($_attributes)):?> <dl> <?php foreach($_attrib ...

javascriptjqueryhtmlcssmagento-1.9