Learn CSS transitions in easy way

In this post,we are going to learn a few tips regarding css transitions.Before we start ,take a look at how
W3C explains CSS transitions.

CSS Transitions allow property changes in CSS values to occur
smoothly over a specified duration.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes
to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition
to the background color swap of a link. When hovered over,
the link’s background color will change, and we’ll use a transition
to smooth out that change—an effect with a
few simple lines of CSS.The markup is a simple hyperlink, like so:

<a href="#" class="sample">Hover me!</a>

Next, we’ll add a declaration for the normal link state with a
little padding and a light background colour, followed by the
background swap to another colour on hover

a.sample {
padding: 5px 10px;
background: #1991fc;
}
a.sample:hover {
color: #030;
background:  #2fc;
}

Now let’s add a transition to that background color change.
This will smooth out and animate the difference over a specified
period of time

a.sample {
padding: 5px 10px;
background: #1991fc;
text-decoration:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.sample:hover {
color: #030;
background:  #2fc;
}

You’ll notice the three parts of a transition in the declaration:

• transition-property: The property to be transitioned (in this case,
  the background property)
• transition-duration: How long the transition should last (0.3
  seconds)
• transition-timing-function: How fast the transition happens over
  time (ease)

The timing function value allows the speed of the transition
to change over time by defining one of six possibilities: ease,
linear, ease-in, ease-out, ease-in-out, and cubic-bezier
(which allows you to define your own timing curve).

For longer animations, the
timing function you choose becomes more of an important
piece of the puzzle, as there’s time to notice the speed changes
over the length of the animation.
Default value is ease.

DELAYING THE TRANSITION

For example, let’s
say we wanted the background transition to happen half a
second after the link is hovered over. We can do that using the
transition-delay property.

The following example adds the same background switch to
the :focus state. This enables triggering the transition from
either hovering over or focusing the link (via the keyboard, for
example).

a.sample {
padding: 5px 10px;
background: #1991fc;
text-decoration:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.sample:hover,
a.sample:focus {
background:  #2fc;
}

TRANSITIONING MULTIPLE PROPERTIES

Let’s say that along with the background color, we also want
to change the link’s text color and transition that as well. We
can do that by stringing multiple transitions together, separated
by a comma. Each can have their varying duration and
timing functions .
Eg:

-o-transition: background .3s ease, color 0.2s linear;

TRANSITIONING ALL POSSIBLE PROPERTIES

An alternative to listing multiple properties is using the all
value. This will transition all available properties.
Let’s drop all into our simple example instead of listing
background and color separately. They’ll now share the
same duration and timing function.

a.foo {
padding: 5px 10px;
background: #1991fc;
text-decoration:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.foo:hover,
a.foo:focus {
color: #030;
background:  #2fc;
}

This is a convenient way of catching all the changes that happen
on :hover, :focus, or :active events without having to
list each property you’d like to transition.