transition-property - HTML CSS CSS Property

HTML CSS examples for CSS Property:transition-property

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. transition-property

Description

The transition-property CSS property sets the names of the CSS properties for a transition effect.

The following table summarizes the transition-property Property.

Item Value
Default value: all
Applies to:All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


transition-property:     property1 [, property2, ... propertyN] | none | all | initial | inherit where property is a CSS property name

Property Values

The following table describes the values of this property.

Value Description
noneNo property will get a transition effect.
all Each property supporting transitions. This is default value.
initial Sets this property to its default value.
inherit take the value of its parent element transition-property property.

The example below shows the transition-property property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 transition-property Property</title>
  <style type="text/css">
    button {<!-- ww  w.j a va  2 s . c  om-->
        font-size: 16px;
        font-weight: bold;
        padding: 10px 20px;
    background: #fe9854;
        border: 3px solid #dc5801;
    /* For Safari 3.0+ */
    -webkit-transition-property: background, border;
    -webkit-transition-duration: 2s;
    /* Standard syntax */
    transition-property: background, border;
    transition-duration: 2s;
  }
  button:hover {
    background: #48c677;
    border-color: #257644;
  }
</style>
 </head>
 <body>
  <button type="button">Place mouse on me</button>
 </body>
</html>

Related Tutorials