CSS3 transition properties

CSS3 transition helps to change property values smoothly. CSS3 transition Properties needs mouse activity to start.

There are following CSS3 transition properties

  • transition-delay.
  • transition-duration.
  • transition-property.
  • transition-timing-function.

transition-delay.

The value defines the time to be taken to start changing property values. The values can be in milliseconds, seconds, minutes etc.

Example:

transition-delay: 3s;

above example will start transition after 3 seconds.

transition-duration.

The value defines the time to be taken to complete the transition.

Example:

transition-duration: 5s;

In above example, transition will take 5 seconds to complete the transition.

transition-property.

The value defines the property on which transition is to be applied.

Example:

transition-property:color;

Above example will target the color property.

transition-timing-function.

Explanation of transition-timing-function

Transition.

This is a shorthand notation in which value of all transition properties can be written.

Example

transition: color 2s linear 3s;

In above example.

transition-property:color;
transition-duration: 2s;
transition-timing-function:linear;
transition-delay: 3s;

Transition properties Example

<html>
<head>
<style>
div#div2 {
padding:0.1px;
width: 100px;
height: 100px;
text-align: center;
font-size:40px;
background: red;
transition: width 1s, height 1s, background 10s, color 5s 3s;
border-radius:50%
}
div#div2:hover {
width: 150px;
height:150px;
background:black;
color:white;
}
</style>
</head>

<body>
<div id=”div2″><b>hi</b></div>
</body>
</html>

Hover the mouse on a red circle.

hi

Note: In above example you have seen color 5s 3s; where 3s is transition delay.

Comments

comments