PHP Library

Support Us

Donate

CSS Library

CSS transition Property & Effects Examples.

With CSS Transitions, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts. CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect. Devsocial.net offers free online tutorials, references and free SEO Tools the world wide web design library.

The `Transition` property is used as follows Example Below. `Hover` on top of this `Div`:

Leave the mouse on top of Div.

<style>
.divnamehere
{
width:100px;
height:100px;
background:green;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:1s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:1s;
padding-top:20px;
font-size:20px;
color:#fff;
}
.divnamehere:hover
{ width:500px; }
</style>

CSS Transitions Properties

Property	Description	CSS
Transition	A shorthand property for setting the four transition properties into a single property	3
Transition-Property	Specifies the name of the CSS property to which the transition is applied	3
Transition-Duration	Defines the length of time that a transition takes. Default 0	3
Transition-Timing-Function	Describes how the speed during a transition will be calculated. Default "ease"	3
Transition-Delay	Defines when the transition will start. Default 0	3

DEMOS: More Examples below. with :hover function.

linear

ease

ease-in

ease-out

ease-in-out

The CSS & HTML *Please Note that our credits or the authors credit must stay intact !<style> /* Author: https://www.devsocial.net : Credits must stay intact for public use. */ #div1{width:100px; height:50px; background:red; color:white; font-weight:bold; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } #div2{width:100px; height:50px; background:#09f; color:white; font-weight:bold; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } #div3{ width:100px; height:50px; background:#fa0; color:white; font-weight:bold; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } #div4{ width:100px; height:50px; background:#00f; color:white; font-weight:bold; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } #div5 { width:100px; height:50px; background:#999; color:white; font-weight:bold; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } #div1 {transition-timing-function: cubic-bezier(0,0,0.25,1);} #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);} /* Safari */ #div1 {-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);} #div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);} #div1:hover{width:500px;} #div2:hover{width:500px;} #div3:hover{width:500px;} #div4:hover{width:500px;} #div5:hover{width:500px;} </style>  <table class="desk"><tbody> <tr><td class="image123"> <div id="div1" style="top:100px">linear</div> <div id="div2" style="top:150px">ease</div> <div id="div3" style="top:200px">ease-in</div> <div id="div4" style="top:250px">ease-out</div> <div id="div5" style="top:300px">ease-in-out</div> </td></tr></tbody></table>

Rating:

Capable: broswers

Date Posted: 2/5/2023

Note: Make sure your page contains a valid doctype for this menu to render properly.

Revision History: Nov 8th, 2023': updated code..

Usage Terms: | Please Read - -> >

Viewed: 42,035

info Share our library with others. Spread the love. Share:

Was this article & Examples Helpful ?
If so you can help us bring this and more to become available for you at anytime. You can help us by donating any amount or Sharing & Following Us. Donate through PayPal.

Buy Ready made Web Apps

Real Estate ready made Web App

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $3,500

Social Network Software + Install + Domain + Hosting.

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $3,700

Services/Booking Web APP

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $4,500

Videos / Streaming Web App

Includes 5 Yr. Domain + 5 Yr. hosting FREE.

Price: $23,500

Live Radio Station

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $4,700

Video Courses/Training

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $17,500

Free Tools

Dev's Tips

Dev: Ramon Sanchez

TIP: # 251 | Meta Tags
When adding META TAGS make sure you dont over Repeat the keywords it wont help with SEO. Keep it Simple dont overdue it...
Contact Developer