Animating Design Studio Components using CSS

[former_member204422]

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

CSS Animation Code

.sample {

    width: 100px;

    height: 100px;

    background: red;

    position: relative;

    /* Chrome, Safari, Opera */

    -webkit-animation-name: myfirst;

    -webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

    -webkit-animation-delay: 2s;

-webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;

    -webkit-animation-play-state: running;

    /* Standard syntax */

    animation-name: myfirst;

    animation-duration: 5s;

    animation-timing-function: linear;

    animation-delay: 2s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-play-state: running;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {

    0%  {background:red; left:0px; top:0px;}

    25%  {background:yellow; left:200px; top:0px;}

    50%  {background:blue; left:200px; top:200px;}

    75%  {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

}

/* Standard syntax */

@keyframes myfirst {

    0%  {background:red; left:0px; top:0px;}

    25%  {background:yellow; left:200px; top:0px;}

    50%  {background:blue; left:200px; top:200px;}

    75%  {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

}

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.