How are CSS Animations and Transitions done?
An animation lets an element gradually change from one style to another. You can change as many properties you want, as many times as you want. You can specify when the change will happen, in percentages, or you can use the keywords “from” and “to” (which represent 0% and 100%). 0% represents the start of the animation, 100% is when the animation is complete.
What is CSS Key frames Rule?
The @key frames rule is where the animation is created. Specify a CSS style inside the @key frames rule and the animation will gradually change from the current style to the new style.
Animation in SAP Design Studio
Let’s take a simple example of a textbox that changes colors and moves along a rectangular transition. The steps to be followed :
1. Create a CSS file with code as shown below
2. The class name for the textbox is, ‘sample’
3. Add the CSS in the Application
4. Add a text box to the center of the canvas(outline)
5. Include the class name ‘sample’ in the textbox
6. Execute to view the transition and animation
Following is the CSS script used:
Advantages and Disadvantages of CSS animations
- CSS3 transitions are natively handled by the browser. They will always be faster than a comparable JQuery animation.
- CSS3 code is petite. Also, you don’t have to create any specific stylesheet for it. You can work on your standard stylesheet.
- JQuery animation is undoubtedly more difficult with several lines of code, whereas in CSS3, there is a good chance the functionality can be achieved with one property.
- Rotating elements in 2D or 3D is possible in CSS only
- The most significant advantage is that it works seamlessly on the iPad, iPhone, Android as well as in Safari mac, due to hardware acceleration. JQuery animations are not as smooth, on mobile devices.