Animating a simple object using CSS3

Introduction

CSS is the language used to add style to HTML elements. CSS or Cascading Style Sheets are text files saved with the extension “.css” containing style rules. Traditionally we needed JavaScript and animation software like Flash to do an animation that works in any environment. These days, CSS makes it easier, cheaper and faster with just a few lines of coding. Yeah, it’s no longer a nightmare to code world-class animations.

We will be discussing the basics of animation by code using CSS.

CSS Animations

Now let’s see a few salient features of Animation using CSS. Let us list them based on their priority.

Animations add additional value to any webpage
CSS3 animations are created frame by frame.
@keyframes is the heart for css3 animation code
The keyframe is mutually interchangeable
It can be used to animate a design for a particular time duration.

Now that we know the benefits of CSS animation, let's move on and learn a simple CSS Animation.

A keyframe defines the style that will be applied for that moment within the animation.

The animation engine will smoothly interpolate the style between the keyframes.

Specify when the style change occurs in percentages or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

animationname is required. Defines the name of the animation.

keyframes-selector is required. Percentage of the animation duration.

The value is between 0 to 100%.

css-styles are also required. One or more legal CSS style properties may be applied.

CSS transforms property using a few 2D transformation methods.

translate()
rotate()
scale()
skew()

translate() is used to move an object from the current position. The boxObj class where you applied that particular div will be moved to right 50px, and top 50px from current position;

rotate() is used to rotate an element. Two types to rotate depends on the value. This value is mentioned in deg.. one is clockwise using positive values. The other uses negative values that rotate it counterclockwise.

scale() This method increases or decreases the overall size of an object. We use two types of scale().

scaleX() is increases or decreases the width of an element.
scaleY() is increases or decreases the height of an element.

skew() This method skews a particular element along the X and Y-axis by the given angles. Here we use a scale() and do a simple animation.

@keyframes bounceObj{
0%{
transform: scale(0.2);
opacity: 0;
}
50%{
transform: scale(1.2);
opacity: 1;
}
100%{
transform: scale(1);
}
}

Let’s move to the next step by doing a basic animation using CSS in which we are using keyframes to transform or transition an object.

Transform

The transform CSS property is used to do activities like rotate, scale, movie and object etc. CSS transforms were first introduced in 2009 and most browsers support the transform effects.

Transitions

The Transitions CSS property enables you to do activities like modifying property values smoothly, changes in a given time period, etc. Transitions play a very vital role in CSS animations.

Transition-property, transition-duration, transition-timing-function, transition-delay are the key factors in transitions

Let’s check out a small example in which we animate a box using its attributes.

HTML

----

<div class="css-square"></div>

CSS

----

Create a box for CSS.

.css-square {
width: 100px;
height: 100px;
background-color: #111;
}

Box created... I added some transition code to animate the box.

.css-square:hover {
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}

With the above code, the box will rotate 45 degrees using the transform function. In order to move to the normal level, we have to use the transition code shown below.

.css-square {
width: 100px;
height: 100px;
background-color: #111;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}

transition: transform .8s ease-in-out

The transition-delay property specifies a delay (in seconds) for the transition effect.

.8s is transition timing

ease-in-out is transition-timing-function.

The transition-timing-function property specifies the speed curve of the transition effect. Mainly, there are two CSS timing functions: ease-in and ease-out. Ease-in is slow at the beginning and fast/abrupt at the end. Ease-out is fast/abrupt at the beginning, slow at the end.

Ease is nice, but you might want to customize some easings that feel right for your brand. Ease, and ease-in-out

have soft edges on both sides, but sometimes it's more appropriate to use either ease-in or ease-out.

Congratulations! You have learned how to create a simple animation and use the transform and transition effects in CSS.