Blogs / SAP / SAP BusinessObjects / SAP Design Studio / Tips and Tricks / Animating SAP Design Studio Components using CSS

Animating SAP Design Studio Components using CSS

Sep 13, 2014


CSS Animations

High performing animations have become increasingly important, as interactive projects get more aggressive and smart devices have burst into the scene. Widely used JQuery has not been able to handle the onslaught, because it simply wasn’t designed for it. The most widely-acclaimed solution is CSS Animations (and Transitions). With CSS3, we can create animations which can replace flash animations, animated images, and JavaScript in existing web pages.

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:

Animating SAP Design Studio Components using CSS
CSS Script for Animations in SAP Design Studio

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
  • Do note that not all browsers support CSS3 animations/transitions. In case you need to support older browsers, JavaScript is the right choice.
  • 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.

Read more blogs from SAP BusinessObjects Design Studio category here.

Corporate HQ:
5920 Windhaven Pkwy, Plano, TX 75093

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

Copyright © Visual BI Solutions Inc.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This Blog!

Share this blog with your friends and colleagues!