Animate with CSS Tricks
Animations developed with CSS are great for applications where you have small, self-contained user interface elements. You can use them to show a tool-tip or to bring a navigation menu in from the side. They only work with browsers that are Web-Kit based, but most desktop and mobile browsers are Web-kit based these days. It’s the easiest way to bring movement to your designs and allows you to control what you want to happen and how many times you would like it to happen. CSS animations use transitions or keyframes.
Transitions. With CSS transitions you can alter the appearance and behavior of an element whenever a state change occurs. The change occurs over a specified period of time and is triggered by an event such as being hovered over, focused on, active, or targeted. In order for a transition to happen an element must:
- Have a change in state, and
- Different styles must be identified for each state.
Transitions do a great job of making visual changes from one state to another so they are perfect for when you need a single state change. But sometimes you want more control or you need multiple states. That’s when it’s time to switch to animation with keyframes.
Keyframes. Keyframes are like jet-fueled transitions. Keyframes are the foundation of CSS animations and allow you to create smooth, maintainable animations that perform relatively well and don’t require reams of scripting. Use them to change properties from one value to another. You can also use keyframes to define how the animation appears at each stage of the timeline. Just identify the keyframes that make up your animation and give them a name. Invoke the keyframes by using the name of the set. Each @keyframes includes:
- Name of the animation: Descriptive name for the animation
- Stages of the animation: Each stage of the animation is represented as a percentage. The beginning state of the animation is represented by 0% and 100% represents the ending state. You can add multiple intermediate states in between.
- CSS Properties: The CSS properties defined for each stage of the animation timeline.
Once your keyframes are defined it is simply a matter of adding the animation properties to the CSS elements you want to animate. Animation properties do two things:
- Assign the keyframe to an element
- Define how it is animated.
With CSS animations you define the animation dependent of the target element. Check out this great example of CSS animation:
See the Pen CSS Animation by Lily Thomas (@MarkupPro) on CodePen.15206
Here’s why we like Greensock:
- Engineered to make animating simple and intuitive
- Completely independent
- Works and plays well with others (JQuery, HTML5, etc)
- Packed with features for professionals
Greensock gives you precise control over complex tweens and nested timelines. Even if you don’t spring for the paid membership there’s still plenty of free content and a great support network through the forums.
See the Pen GreenSock Animation by Lily Thomas (@MarkupPro) on CodePen.15206
Animations are the difference between a project that works and a project that is an actual pleasure to use. Use animations to take your designs from meh to amazing.
What type of animations do you like to use? Tell us in the comments below.