Aug
10
CSS – transition Property ”; Previous Next CSS transition property allows you to animate changes in an element”s style properties over a specified duration. They provide a simple and efficient way to add animations to web elements without the need for complex JavaScript code or external libraries. CSS transition property is a shorthand property for transition-property transition-duration transition-timing-function transition-delay transition-behavior (This property is on an experimental basis and may not be supported). Possible Values <length> − A specific length value such as pixels (px), centimeters (cm), inches (in), etc. Applies to All elements, ::before and ::after pseudo-elements. Syntax transition: margin-right 4s; transition: margin-right 4s 1s; transition: margin-right 4s ease-in-out; transition: margin-right 4s ease-in-out 1s; transition: display 4s allow-discrete; transition: margin-right 4s, color 1s; The value for the transition property is defined as one of the following: The none value indicates that there will be no transitions on this element. This is the default value. Commas are used to separate one or more single-property transitions. A single-property transition specifies the transition for one specific property or all properties. This includes: A zero or one value indicating the property or properties for which the transition should be applied. This can be specified as: A <custom-ident> representing a single property. The all value in transitions indicates that the transition will be applied to all attributes that change when the element changes its state If no value is specified, all value will be assumed, and the transition will apply to all changing properties. Specify zero or one <easing-function> value indicating the easing function to be used. Specify zero, one, or two <time> values for transition properties. The first parsed-time value is applied to transition-duration, and the second is assigned to transition-delay. If a property has discrete animation behaviour, a zero or one value indicates whether to initiate transitions. If the value is present, it can be either allow-discrete or normal keyword. CSS transition – With Two Values The following example demonstrates that transition is applied to the padding property with a duration of 2s. When you hover over the box, padding increases to 15px and the background color changes to greenyellow − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 5px; transition: padding 2s; background-color: lightskyblue; } .box:hover { background-color: greenyellow; padding: 15px; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – delay Value The following example demonstrates that transition is applied to the padding property. The transition takes 2s to complete, and it starts after a delay of 0.5s − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 5px; transition: padding 2s .5s; background-color: lightskyblue; } .box:hover { background-color: greenyellow; padding: 15px; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – easing Function The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth color transition with an ease-in-out timing function over the 4s duration − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 15px; transition: background-color 4s ease-in-out; background-color: lightskyblue; } .box:hover { background-color: greenyellow; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – easing Function and delay The following example demonstrates that transition is applied to the padding property. When you hover over the box, background color changes to green-yellow and padding increases to 15px, starting a smooth transition over the duration of 4s with an ease-in-out timing function and a delay of 0.7s − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 5px; transition: padding 4s ease-in-out 0.7s; background-color: lightskyblue; } .box:hover { background-color: greenyellow; padding: 15px; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – behavior Value The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth transition over the duration of 5s using the allow-discrete timing function − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 10px; transition: background-color 5s allow-discrete; background-color: lightskyblue; } .box:hover { background-color: greenyellow; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – Applied To Two Properties The following example demonstrates that transition will be applied on text color in 2s and on margin-left in 4s. The text color will transition in 2s, while the left margin will take 4s − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 10px; transition: color 2s, margin-left 4s; background-color: lightskyblue; } .box:hover { color: red; margin-left: 70px; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – Related Properties Following is the list of CSS properties related to transition: property value transition-delay Determines the amount of time to wait before starting a transition effect when a property”s value changes. transition-duration Determines amount of time that a transition animation should take to complete. transition-property Specifies which CSS properties should have a transition effect applied. transition-timing-function Determines which intermediate values are generated for CSS properties affected by a transition effect. Print Page Previous Next Advertisements ”;