w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How to create a stepped animation from a strip?

Here's my CSS for a loading animation from my site. Since you did not provide any images, I'll provide mine as an example.

Pay attention to the animate property. The synatx is as follows:

animation: name duration timing-function delay iteration-count direction;

In my case direction is omitted.

Image: loader

.loader {
    display: inline-block;
    width: 32px !important;
    height: 32px !important;
    background-image: url("loader.png");
    background-repeat: no-repeat;
    background-size: 2400px 32px;
    animation: play16 3.25s steps(75) infinite;
@keyframes play32 {
   from { background-position:    0px; }
     to { background-position: -2400px; }

In the steps(75), the number has to match the amount of 'frames' your sprite contains, otherwise the animation will cut off or some frames will repeat.

I use prefix-free to eliminate the need for vendor prefixes. You can either use this, or prefix the code manually.

© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.