Creating meaningful motion with transforms, transitions, and keyframes
O’Reilly’s Boston Training Center, Boston, MASee 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
Familiarity with HTML and CSS is necessary, but experience with CSS transitions, transforms, and keyframe animations is not.
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.
- 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.
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.
Rental Car Discounts
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
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.
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 firstname.lastname@example.org
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.