In-Person Training

CSS Animation

Creating meaningful motion with transforms, transitions, and keyframes

6

O’Reilly’s Boston Training Center, Boston, MA

See ticket options

Course limited to 40 people. Sign up before it sells out!

Digital design, including web design, is becoming increasingly animated. It’s one thing to make a link change color on hover, but another entirely to fade UI elements in and out, or have them swoop in to respond to a user’s action. Every bit of animation communicates something to the user, just as our font and color choices do—and if we’re careless, we can send the wrong message entirely.

Join Eric Meyer (CSS: The Definitive Guide) for a deep dive into the details of how transitions and animations are accomplished, including the differences between the two. Building upon that foundation, you’ll then take part in a master class in the principles and proper use of animation from Val Head (Designing Interface Animation). By the end of these two days, you’ll have mastered the how and why of using CSS animations—and, in no time, your websites will show it.

What you’ll learn—and how you can apply it

By the end of this live, hands-on workshop, you’ll understand:

  • The inner workings of CSS transitions, transforms, and keyframe animations
  • The how and why of using CSS-based animation effectively in websites

This course is for you because…

  • You’re new to CSS animation and want to learn both good coding practices for creating it and strategies for using it effectively in your work
  • You’re a web designer or developer who wants to better understand how to create animations with CSS transforms, transitions, and keyframes to, as well as best practices for using them effectively

Prerequisites

Familiarity with HTML and CSS is necessary, but experience with CSS transitions, transforms, and keyframe animations is not.

Computer Requirements

A laptop with more than one modern browser, as well as a code editor of some sort, is highly recommended. Working files will most likely be distributed via a public Github repository, but a Github account is not necessary.

About your instructors

Val Head

Val Head is a designer and web animation consultant with a talent for getting designers and developers alike excited about the power of animation. She is the author of CSS Animation on lynda.com, and Designing Interface Animation published by Rosenfeld Media.

She shares her passion for web animation as the host of the All The Right Moves screencast, co-host of the Motion and Meaning podcast, and curator the UI Animation Newsletter.

A proud supporter of the web community, she co-founded the Web Design Day conference and runs Pittsburgh’s Girl Develop It chapter. Val leads workshops at companies and conferences around the world on motion design for the web and loves every minute of it.

Eric A. Meyer

Eric A. Meyer has been a burger flipper, a law publishing intern, a college webmaster, an early blogger, one of the original CSS Samurai, a member of the CSS Working Group, a consultant and trainer, and a Standards Evangelist for Netscape. Currently, he is technical lead at the 501(c)(3) non-profit Rebecca’s Gift, and co-founder of An Event Apart with Jeffrey Zeldman.

Among other things, Eric wrote CSS: The Definitive Guide for O’Reilly and Design for Real Life for A Book Apart, created the first official W3C test suite, wrote an unexpectedly popular CSS reset, and assisted in the creation of microformats. In 2006, he was inducted into the International Academy of Digital Arts and Sciences for “international recognition on the topics of HTML and CSS” and helping to “inform excellence and efficiency on the Web.” Eric lives with his family in Cleveland, Ohio, which is a much nicer city than you’ve heard. He enjoys a good meal whenever he can and considers almost every form of music to be worthwhile.

Course outline

  • Day One
  • CSS transforms
    • A quick introduction to the various kinds of transforms and how they differ—or don’t!
  • CSS transitions
    • An in-depth exploration of the CSS transition property and all its possibilities, including timing, tempo, property scoping, and more
    • How transitions and element states interact, and how transitions should be applied in order to achieve a desired result
    • Overview of which properties can be transitioned, which can’t, and why it matters
  • CSS keyframe animations
    • An in-depth exploration of the CSS animation property and its values, including timing, tempo, looping, states, direction, and more.
    • An examination of the structure and use of keyframe blocks
    • Combining multiple animations on the same element to set up complex user interactions
    • Creative use of timing in animation lengths and start times
  • Throughout the day, the class will take short breaks to work hands-on with the various properties and values that are being discussed.
  • Day Two
  • Applying classic animation principles to CSS
    • How classic principles of animation—like timing, spacing, offsets and others—can be useful for work on the web and what the classic principles looks like in the context of interfaces
    • Executing the classic principles with CSS with exercises and examples
    • CSS easing choices in-depth
  • The UX of UI animation
    • Principles of successful interactive animation
    • Identifying where animation can contribute the most to UX and how to pull it off with style
    • Getting the most out of your CSS animation performance
  • The class will break into small groups for various exercises throughout the day as they work to solve specific design problems through CSS animation. Each group will share their solutions with the rest of the class for analysis and discussion.

Venue

The course will be held at the O’Reilly Boston Training Center: 2 Avenue de Lafayette, 6th floor, Boston, MA 02111

Lunch will be provided.

Travel discounts

Rental Car Discounts

Hertz

If you need a rental car while attending the conference, you may go to the Hertz Interactive Reservation System to receive the special O’Reilly discount on rental cars for the conference. Or call Hertz Reservations at (800) 654-3131 and mention code #01XY0041.

United Airline Discount

United

To receive your 3%–10% Discount on United Airlines flights to our event, you can book online at united.com and provide discount Code ZVUR591372. Or, for a $25 service fee you can call United Meetings at (800) 426-1122 where a ticketing agent can help you by phone.

Group tickets

Working as a team? Learn as a team.

Taking this course as a team ensures that everyone is on the same page and understands both the immediate and long-term and immediate goals of your project. Exploring new ideas and collaborating on exercises together is a great team-building experience; everyone on your team will have the opportunity to ask questions, discuss use cases, and learn from other participants.

For group tickets and enterprise licensing, please contact training@oreilly.com

Code of Conduct

All participants must follow our Code of Conduct, the core of which is this: an O’Reilly events should be a safe and productive environment for everyone. Read more

O’Reilly Media, Inc. assumes no responsibility or liability for the facilities or services provided by the vendors and suppliers. Anyone attending this conference releases O’Reilly from any and all claims that may arise out of attending at this conference.

Thanks for signing up!
We protect your privacy.
Thanks for signing up!
We protect your privacy.