Newsletters
News & Information for Technology Purchasers NewsFactor Sites:       NewsFactor.com     Enterprise Security Today     CRM Daily     Business Report     Sci-Tech Today  
   
Home Enterprise I.T. Cloud Computing Applications Hardware More Topics...
APC Free White Paper
Optimize your network investment &
Enter to win a Samsung Galaxy Note

www.apc.com
Best of the Best: Tech Blog Roundup
Next Generation Data Center Is Here!
Home > Tech Blogs  Flag for objectionable content? Flag for Objectionable Content?
Average Rating:
Rate this article:  
Vitamin: CSS Sprite Sheet Animations with steps()
2014-07-14 7:01am -07:00T Visit Vitamin


Outtake:

There’s a little-known timing function in CSS animations that lets us break an animation into segments––or steps––instead of running it as one continuous animation from start to finish. This function is useful for creating sprite sheet animations because we’re able to precisely display each sprite image as a frame without any easing effects inbetween.

Animating with the steps() function

With steps() we’re able to control the amount of keyframes rendered in an animation’s duration; it progresses the animation in equidistant steps based on the value we set. Knowing this, let’s use steps() to create a simple character sprite sheet animation.

I used Illustrator artboards to create each animation frame as a separate 190240 image, then took advantage of Compass’ spriting feature to quickly generate a horizontal sprite sheet containing all the exported images.

The animation sprite sheet

The final animation sprite sheet

Creating the animation

To animate our monster character, we’ll first create a rule where we define the width and height dimensions and display the main sprite sheet as a background image.

.monster {
  width: 190px;
  height: 240px;
  background: url('monster-sprite.png') left center;
}

Next, we need to create a keyframe rule that animates the background position of the sprite sheet. The...

Read More on Vitamin...


  © Copyright 2014 Vitamin. All rights reserved. If you've enjoyed this content, please visit Vitamin to show your appreciation.

Information for Bloggers
 

Latest Blog Entries from Vitamin:
Refer a Friend and Get Treehouse for Free!
Modular Pseudo-Elements with Sass
New Course: Laravel Basics
New Course: Laravel Basics
The Share Icon
Latest Tech Blogs from around the Blogosphere:
Ubuntu Tips,Tricks,Tutorials and Howtos: Setup FTP server using VsFtp and Configure Secure FTP connections (Using TLS/SSL) on Ubuntu 14.04 Server
Techdirt: DailyDirt: Making Good Toys
Ars Technica: Stealthy new malware snatching credit cards from retailer’s POS systems
Ars Technica: NASA announces the instruments for the next Mars rover
hack a day: PS/2 Synth Will Knock You Off Your Broom
Product Information and Resources for Technology You Can Use To Boost Your Business

Navigation
NewsFactor Network
Home/Top News | Enterprise I.T. | Cloud Computing | Applications | Hardware | Mobile Tech | Big Data | Communications
World Wide Web | Network Security | Data Storage | CRM Systems | Microsoft/Windows | Apple/Mac | Linux/Open Source | Personal Tech
Press Releases
NewsFactor Network Enterprise I.T. Sites
NewsFactor Technology News | Enterprise Security Today | CRM Daily

NewsFactor Business and Innovation Sites
Sci-Tech Today | NewsFactor Business Report

NewsFactor Services
FreeNewsFeed | Free Newsletters

About NewsFactor Network | How To Contact Us | Article Reprints | Careers @ NewsFactor | Services for PR Pros | Top Tech Wire | How To Advertise

Privacy Policy | Terms of Service
© Copyright 2000-2014 NewsFactor Network. All rights reserved. Article rating technology by Blogowogo. Member of Accuserve Ad Network.