CSS Transitions

CSS transitions allows you to change property values smoothly, over a

given duration. Output:
Example:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
 CSS Transitions

CSS transitions allows you to change property values

smoothly, over a given duration.
Example: Output:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
 CSS Transitions

• The transition-timing-function property can have the

following values:
• ease - specifies a transition effect with a slow start,
then fast, then end slowly (this is default)
• linear - specifies a transition effect with the same
speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow
start and end
• cubic-bezier(n,n,n,n) - lets you define your own values
in a cubic-bezier function
 CSS Transitions

Example: Output:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
 CSS Transitions

Example: Output:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
 The transition-delay 

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

transition effect.
Example:
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
 Animation 

CSS allows animation of HTML elements without

using JavaScript or Flash!
Properties:
• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation
 The @keyframes Rule

• The animation will gradually change from the

current style to the new style at certain times.
• To get an animation to work, you must bind
the animation to an element.
• The following example binds the "example"
animation to the <div> element. The
animation will last for 4 seconds, and it will
gradually change the background-color of the
<div> element from "red" to "yellow":
 The @keyframes

• Example
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
<div></div>
 The @keyframes

• Example
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}<div></div>
 The @keyframes
• Example
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
<div></div>
 animation-delay
• Example
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
<div></div>
 animation-iteration-count
• Example
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
<div></div>
 animation-direction
• Example
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
<div></div>
 animation-timing-function
This property specifies the speed curve of the
animation.
• ease - Specifies an animation with a slow start,
then fast, then end slowly (this is default)
• linear - Specifies an animation with the same
speed from start to end
• ease-in - Specifies an animation with a slow start
• ease-out - Specifies an animation with a slow end
• ease-in-out - Specifies an animation with a slow
start and end
• cubic-bezier(n,n,n,n) - Lets you define your own
values in a cubic-bezier function
 animation-fill-mode
The animation-fill-mode property can have the following
values:
• none - Default value. Animation will not apply any styles
to the element before or after it is executing
• forwards - The element will retain the style values that is
set by the last keyframe (depends on animation-direction
and animation-iteration-count)
• backwards - The element will get the style values that is
set by the first keyframe (depends on animation-
direction), and retain this during the animation-delay
period
• both - The animation will follow the rules for both
forwards and backwards, extending the animation
properties in both directions
 animation-fill-mode
Example:
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
@keyframes example {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
 Animation Shorthand Property

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

The same animation effect as above can be achieved by using the

shorthand animation property:

div {
  animation: example 5s linear 2s infinite alternate;
}