Developer Ramon Sanchez has something to say ?
Welcome to the scripmaual the database where you an find anything from Css menus to javascript script's and more scripting language. This week we have placed nore css menus that are very simple to integrate ... Check them out »

Advertise your Product on scriptmanual ?
Get your product known with a special format always on top of all categories join the scriptmanual advertiser network. We offer cheap prices for all advertiser's ..get real results... Read more >>

Home » CSS3 Transitions

CSS3 Transitions Implementing & Examples


With CSS3 Transitions, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

Capability: Firefox, Safari/Chrome, Opera and IE9

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>


Recommended to add inside the <head> of the Page. but can be used anywhere in the body as well or added to your stylesheet.

CSS3 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

DEMO: More Examples below. with :hover function.

linear
ease
ease-in
ease-out
ease-in-out

The CSS

*Simply paste this in the head section.

The HTML

*Simply paste this inside the <body></body> section.

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.. P.S Web hosting cost us alot of money..

Business Services

Graphics Design

  • Business CardsBusiness Cards
    Just $35 per card. Order / More Info »
  • Logo DesignLogo Design
    Just $55 per logo. Order / More Info »
  • Company BrochureCompany Brochure
    Just $65 each. Order / More Info »
  • Website Listing inWebsite Listing in 2,000 Directories
    Just $35 each. Order »
  • Party / Events Flyers DesignParty / Events Flyers Design
    Just $55 each. Order »
  • Advertisement Units Design & Flash AdsAdvertisement Units Design & Flash Ads
    Leaderboard (728 x 90) - $95
    Banner (468 x 60) - $40
    Skyscraper (120x600) - $125
    Skyscraper2 (160x600)- $130
    Half Banner (234x60) - $75

    Order Now » We can design your custom
    Ad banners in days.
  • Social Buttons For Websites
    Just $55. More Info »
    ~ Example below ~

Follow Us

Website Design queens ny Linked In NYWDS.com

Developer's Tip

  • Ramon Sanchez
    TIP: # 256 | 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...