Animate with CSS
Other then to create animation there is one more popular conversion i.e PSD to CSS in which we convert Photoshop PSD file into CSS /HTML. But when we talk about animations then that Animations which are developed using CSS are great for applications where you have small and self contained user interface elements. You can use them to show a tool-tip or to bring a navigation menu from the side. They usually only work with the browsers which are web-kit based. Most of the desktop and mobile browsers are web-kit based now a days. Hence it is most convenient way to bring movement to your designs and allows you to control what you want to let it happen and how many times you would like it to happen.
CSS animations use transitions or keyframes.
Using CSS transitions you can easily alter the appearance and behavior of an element whenever a state change occurs. The change occurs over a specific period of time and is started by an event such as when hovered over, focused on, active or targeted.
For a transition to happen an element must
- Have a change in state.
- Different styles must be identified for each state.
Transitions do a good job of making visual changes from one state to another hence they are best when you need a single state change. Sometimes you want more control or you need multiple states. In this case it is time to switch to animation with keyframes.
Keyframes are very fast transitions. Keyframes are the foundation of CSS animation and enable you to create smooth and maintainable animations which perform well and don’t require lots of scripting. You can use them to change properties from one value to another. Keyframes can also be used to define how the animation appears at each state of the timeline. You can identity the keyframes which form your animation and give them a name. Hence then you can invoke the keyframes by using the name of the set. Each of the keyframes include the following:-
- Name of the animation
- Detailed name of the animation.
- Stages of the animation
- Each stage of the animation is written as a percentage. The beginning state of the animation is represented by 0% and 100% represents the ending state and you can add multiple in between states.
- CSS Properties
- The CSS properties defined for each stage of the animation timeline. After your keyframes are defined you can simply add animation properties to the CSS elements you want to animate. Animation properties normally do these two things:- - Assign the keyframe to an element
- Define how it will be animated
Using CSS animations you can define the animation dependent of the target element.
Due to these benefits of Greensock, we like it:-
- Created to make animating simple and intuitive
- Completely independent
- Packed with lots of features for professionals
- Works and plays with others also like jQuery, HTML5 etc.
Greensock gives you accurate control over the complex and nested timelines. Even if you don’t go for the paid membership there is still lots of free content and a great support network in the online forums.
Animations make lots of difference between a project that works and a project that is fun to use. You can use animations to take your designs from normal to amazing levels.