CSS 3 – Transitions & Animations

CSS 3 – Transitions & Animations

 

Transition properties allow elements to change values or behavior after a specified time, animating the property changes, rather than having them occur immediately. Just like when the mouse over to a menu item then it change color, background immediate. Now the same things will happen after a specific duration in seconds.

Example

<style>

div

{

background: red;

}

div:hover

{

transition:5s;

background: green;

}

</style>

<div>Hello User … place mouse here…</div>

Here you will notice that the background color of the given div will take time of 5 seconds to change from red to green completely.

For compatibility in all supporting browsers, vendor prefixes are required:

-webkit-transition, -moz-transition, -o-transition, -ms-transition

 

Example 2

<style>

#trans  {

width: 170px;

height: 120px;

border:solid 1px; }

#trans:hover {

background:red;

transition: 5s;

width:300px;

height: 250px;

-webkit-transform: rotate(90deg);

/*use for safari and other browser or u may use simply the bottom one  */

transform: rotate(45deg);

background:#FF0000; }

</style>

<h2>Transitions in CSS3</h2>

<div id=”trans”>

See how transition take effects on mouse over by speed 5seconds

</div>

 

 

Transition Timing

The transition-timing-function property is used to set the speed in which a transition will move. A transition can have multiple speeds within a single duration. Few known properties are linear, ease-in, ease-out, and ease-in-out.

<style>

.box

{

background: #2db34a;

border-radius: 5px;

transition-property: background, border-radius;

transition-duration: .2s, 1s;

transition-timing-function: linear, ease-in;

}

.box:hover {

background: #ff7b29;

border-radius: 50%;

}

</style>

<div class=”box”> </div>

 

 

 

Transition Duration

The duration in which a transition takes place is set using the transition-duration property.

<style>

.box

{

background: green;

border-radius: 5px;

transition-property: background, border-radius;

transition-duration: .2s, 1s;

transition-timing-function: linear;

}

.box:hover

{

background:red;

border-radius: 40%;

}

</style>

<div class=”box”></div>

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/08/29/css-3-transitions-animations/
YouTube39
YouTube