Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    A Pocket Guide to CSS Animations
    A Pocket Guide to CSS Animations
    A Pocket Guide to CSS Animations
    Ebook56 pages26 minutes

    A Pocket Guide to CSS Animations

    By Val Head

    4.5/5

    ()

    Read preview

    About this ebook

    CSS animations open up a whole new way to look at and use CSS to bring motion to the web in creative ways. This Pocket Guide is designed to help you jump into using CSS animations in your own projects, providing a strong foundation on which to start experimenting and creating.

    In this book Val covers the basics of CSS animations, walking you through a series of examples, and discussing practical considerations for dealing with browsers and fallbacks. You'll have everything you need to start playing with CSS animations in just a couple of hours.
    LanguageEnglish
    PublisherBookBaby
    Release dateMay 21, 2013
    ISBN9781907828188
    A Pocket Guide to CSS Animations

    Related to A Pocket Guide to CSS Animations

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    Related categories

    Reviews for A Pocket Guide to CSS Animations

    4.5/5

    2 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      A Pocket Guide to CSS Animations - Val Head

      support

      Introduction

      This book is designed to be a jump-start for you to familiarise yourself with CSS animations and start using them to bring your web-based interfaces and artwork to life. While the W3C’s CSS animations spec is still technically in the works, there’s plenty of it that we can use today.

      To me, one of the most exciting things about CSS animations is how easily we can add them to our work using tools we already know. If you’re well-versed in HTML and CSS, there’s no new language to learn or plug-in to shoehorn in to add motion to your work. You’ve already got the skills and tools you need to jump right in. That’s a very big plus! Whether you want to add just little bit of motion for compelling design details, or go all out with tons of animation, the power is already in your hands.

      CSS transitions, JavaScript and SVG are also viable options for adding motion on the web and are all certainly worth checking out, but we won’t be covering them in this book. We’ll stick to things included in the CSS animations spec.

      My aim with this short book is to give you a taste of what’s possible and provide a strong foundation on which to start experimenting and creating. This book will give you enough to get started with CSS animations, enough to be dangerous…and creative!

      A quick word on vendor prefixes

      You can’t get very far with CSS animations before running into the need for vendor prefixes, so let’s take a minute to cover how I’ll be using them in this book.

      As I write this, the most recent versions of Firefox, Opera and IE support CSS animations without prefixes – yay! Other browsers, however, including slightly older versions of these browsers, still require vendor prefixes for animation support. For that reason, I highly recommend using prefixes for all your animation properties in any sort of production project. In fact, let’s just say they’re required.

      Of course, while you’re experimenting or just trying things out locally, feel free to use whichever prefix your browser of choice requires. Just add in your prefixes for the production version.

      To keep things easier to read, I’ll be using the unprefixed version of animation properties for the code snippets presented in this book. The accompanying code examples contain vendor prefixes, and some of the examples are also available on codepen.io for you to edit and experiment with on the fly as well.

      So,

      Enjoying the preview?
      Page 1 of 1