CSS Transitions

CSS  transition property is used to change property values smoothly during specified time duration on mouse over effects.

CSS  transition properties are given as below.

  1. transition
  2. transition-delay
  3. transition-duration
  4. transition-property
  5. transition-timing-function

transition property is short hand property of above.

We can create a transition effect by specifying CSS property where you want to add an effect and the duration of the effect.

Syntax :

transition: width 1s;

As above syntax, first value for transition property is width and second value is 1 second delay time .

Also we can use other transition properties as below

transition-delay: 1s;
transition-property : width;
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out;
transition-duration: 2s;

CSS transition-delay property is used to wait for some time before the transition effect starts.
CSS transition-duration is used to specify how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
CSS transition-property property specifies the name of the CSS property where the transition effect is applied. (the transition effect will start when the specified CSS property will change).
Css transition-timing-function property specifies the speed curve of the transition effect.

All transition effect will be occured when a user mouses over the html element.

Example :

<html>
<head>
<title>Learn CSS Transitions tutorials by aryatechno</title>
<style>
.content {

width: 90px;
height: 100px;
background: yellow;
transition: width 4s;
}

.content:hover{
width: 290px;
}

</style>
</head>
<body>
<h2>Example for CSS Transitions property</h2>
<div class="content">

</div>

</body>
</html>

Output :

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

98774