The transition property in CSS allows you to smoothly
change a CSS property from one value to another over a specified duration. It
provides an easy way to create animations when the property value changes.
Here's a detailed overview of the transition property and its related
vendor-specific properties:
CSS transition Property
The transition property is a shorthand property for the following four transition properties.
· transition-property: Specifies the CSS property you want to add an effect to (e.g., width, height, color). You can specify multiple properties separated by commas.
· transition-duration: Specifies how long the transition effect takes to complete. It can be defined in seconds (e.g., 2s) or milliseconds (e.g., 500ms). If not specified, the default value is 0s.
· transition-timing-function: Defines the speed curve of the transition effect (e.g., ease, linear, ease-in, ease-out, ease-in-out). The default is ease.
· transition-delay: Specifies a delay before the transition starts. Like transition-duration, it can be defined in seconds or milliseconds.
Example
.element { transition: width 2s ease-in-out 1s; }
Following are the possible values for transition-timing-function
1. linear: The transition progresses at a constant speed from start to finish.
2. ease: This is the default value. The transition starts slowly, accelerates in the middle, and then slows down at the end. It provides a more natural, smooth transition.
3. ease-in: The transition starts slowly and speeds up towards the end.
4. ease-out: The transition starts quickly and slows down towards the end.
5. ease-in-out: The transition starts slowly, accelerates in the middle, and then slows down towards the end. It's a combination of ease-in and ease-out.
6. step-start: The transition jumps instantly to the final state at the beginning. It is equivalent to steps(1, start).
7. step-end: The transition waits until the end, then jumps to the final state. It is equivalent to steps(1, end).
hello-world.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Transition Timing Function Demo</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-wrap: wrap; justify-content: space-around; padding: 20px; } .box { width: 150px; height: 150px; margin: 20px; background-color: lightcoral; color: white; display: flex; align-items: center; justify-content: center; text-align: center; transition-property: background-color; transition-duration: 2s; font-size: 1em; cursor: pointer; border-radius: 8px; } .box:hover { background-color: lightseagreen; } /* Different transition-timing-functions for each box */ .linear { transition-timing-function: linear; } .ease { transition-timing-function: ease; } .ease-in { transition-timing-function: ease-in; } .ease-out { transition-timing-function: ease-out; } .ease-in-out { transition-timing-function: ease-in-out; } .step-start { transition-timing-function: step-start; } .step-end { transition-timing-function: step-end; } .steps { transition-timing-function: steps(4, end); } .cubic-bezier { transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0); } </style> </head> <body> <div class="box linear">linear</div> <div class="box ease">ease</div> <div class="box ease-in">ease-in</div> <div class="box ease-out">ease-out</div> <div class="box ease-in-out">ease-in-out</div> <div class="box step-start">step-start</div> <div class="box step-end">step-end</div> <div class="box steps">steps(4, end)</div> <div class="box cubic-bezier">cubic-bezier(0.25, 0.1, 0.25, 1.0)</div> </body> </html>
Hover the mouse on any of the above boxes to see the affect.
Apply transitions using transition property
The transition shorthand property allows you to define transitions for multiple properties in a single declaration. You can list the properties you want to transition, along with their respective timing functions, durations, and delays.
Example
transition: width 2s ease, height 2s ease-in, background-color 1s linear, border-radius 1s ease-out;
transition-property.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Transition Timing Function Demo</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-wrap: wrap; justify-content: space-around; padding: 20px; } .box { width: 150px; height: 150px; margin: 20px; background-color: lightcoral; color: white; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1em; cursor: pointer; border-radius: 8px; transition: width 2s ease, height 2s ease-in, background-color 1s linear, border-radius 1s ease-out; } .box:hover { background-color: lightseagreen; width: 300px; height: 100px; border-radius: 12px; } </style> </head> <body> <div class="box">linear</div> </body> </html>
Above snippet generate below box.
Hover the mouse on above box, you will see below transition affect.
Vendor-Specific Transition Properties
Before all browsers supported the standard transition property, web developers used vendor prefixes to ensure compatibility with different browsers. While modern browsers now universally support the unprefixed transition, understanding these prefixes can be useful for historical context and older projects.
1. -webkit-transition: For older versions of browsers using the WebKit engine, like older versions of Chrome, Safari, and newer versions of Edge.
.element { -webkit-transition: width 2s ease-in-out 1s; }
2. -moz-transition: For older versions of Mozilla Firefox.
.element { -moz-transition: width 2s ease-in-out 1s; }
3. -o-transition: For older versions of Opera.
.element { -o-transition: width 2s ease-in-out 1s; }
As a best practice, use the Standard Property First, always define the standard transition property first. This ensures that if the browser supports the standard, it will use it over the prefixed versions.
.element { transition: width 2s ease-in-out 1s; -webkit-transition: width 2s ease-in-out 1s; -moz-transition: width 2s ease-in-out 1s; -o-transition: width 2s ease-in-out 1s; }
No comments:
Post a Comment