revision:
- is a shorthand property for: "transition-property", "transition-duration", "transition-timing-function", "transition-delay". Always specify the "transition-duration" property, otherwise the duration is 0s, and the transition will have no effect.
transition-property : specifies the name of the CSS property the transition effect is for
transition-duration : specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function : specifies the speed curve of the transition effect
transition-delay : defines when the transition effect will start
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Hover over the div element below, to see the transition effect:
<div>
<p>Hover over the div element below, to see the transition effect:</p>
<div id="TRANS-A"></div>
</div>
<style>
div#TRANS-A {width: 10vw; height: 10vw; background: green; transition: width 2s;}
div#TRANS-A:hover {width: 30vw;}
</style>
- specifies when the transition effect will start. The transition-delay value is defined in seconds (s) or milliseconds (ms).
time : specifies the number of seconds or milliseconds to wait before the transition effect will start
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Hover over the div element below, to see the transition effect (Note that the transition effect will wait 2 seconds before starting):
<div>
<p>Hover over the div element below, to see the transition effect (Note that the transition
effect will wait 2 seconds before starting):</p>
<div id="TRANS-B"></div>
</div>
<style>
div#TRANS-B {width: 10vw; height: 10vw; background: blue; transition-property: width;
transition-duration: 5s; transition-delay: 2s; }
div#TRANS-B:hover {width: 30vw;}
</style>
- specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
time : specifies how many seconds or milliseconds a transition effect takes to complete. Default value is 0s, meaning there will be no effect
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Hover over the div element below, to see the transition effect (the transition effect will lasts for 5 seconds):
<div>
<p>Hover over the div element below, to see the transition effect (the transition effect
will lasts for 5 seconds):</p>
<div id="TRANS-C"></div>
</div>
<style>
div#TRANS-C {width: 10vw; height: 10vw; background: orange; transition-property:
width; transition-duration: 5s;}
div#TRANS-C:hover {width: 30vw;}
</style>
- specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).
A transition effect could typically occur when a user hover over an element.
Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.
none : no property will get a transition effect.
all : default value. All properties will get a transition effect.
property : defines a comma separated list of CSS property names the transition effect is for.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Hover over the div element below, to see the transition effect:
<div>
<p>Hover over the div element below, to see the transition effect:</p>
<div id="TRANS-D"></div>
</div>
<style>
div#TRANS-D {width: 10vw; height: 10vw; background: burlywood; transition-property: width,height; transition-duration: 2s;}
div#TRANS-D:hover {width: 30vw; height: 15vw;}
</style>
- specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration.
linear : specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease : default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
ease-in : specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out : specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out : specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
step-start : equivalent to steps(1, start)
step-end : equivalent to steps(1, end)
steps(int , start | end) : specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end"
cubic-bezier(n,n,n,n) : define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
initial : sets this property to its default value
inherit : inherits this property from its parent element.
Hover over the div element below, to see the transition effect:
<div>
<p>Hover over the div element below, to see the transition effect:</p>
<div id="TRANS-E"></div>
</div>
<style>
div#TRANS-E {width: 10vw; height: 10vw; background: lightseagreen; transition: width 2s;
transition-timing-function: linear;}
div#TRANS-E:hover {width: 30vw;}
</style>
The transition-property defines the CSS property where the transition over the element will be applied. We can also apply a transition to a single property (e.g., background-color or transform) or to all the properties in the rule-set.
Codes:
<style>
.property{display:flex; justify-content: center; align-items: center; height: 20vh;}
.circle{font-size: 3vw;text-align: center; line-height: 10vw; width: 10vw; height: 10vw; background: crimson; margin: auto;
border-radius: 50%/50%;}
.circle:hover{background: #c2c8d1; transform: rotate(45deg);}
.circle2{transition-duration: 400ms;}
.circle3{ transition-duration: 2500ms; transition-property: background;}
</style>
<div>
<div class="property">
<div class="circle circle1">1</div>
<div class="circle circle2">2</div>
<div class="circle circle3">3</div>
</div>
</div>
The transition-duration property defines the time span of the transition over the element. We can specify the duration in seconds or milliseconds.
Codes:
<style>
.duration{display:flex; justify-content: center; align-items: center;height: 20vh;}
.box{font-size: 3vw; text-align: center; line-height: 5vw; width: 10vw; height: 10vw; background: #48689c; margin: auto;}
.box:hover{background: #c2c8d1;}
.box2{transition-duration: 400ms;}
.box3{transition-duration: 2500ms;}
</style>
<div>
<div class="duration">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</div>
"transition-timing-property" is used to describe how a transition will proceed over its duration, allowing a transition to change speed during its course. This takes in four options; linear, ease-in, ease-out, and ease-in-out.
Codes:
<style>
.timing{display:flex; flex-flow: column nowrap; height: 40vh;}
.rec{font-size: 3vw;text-align: center; width: 20vw; height: 8vw; margin: 0 2vw; transition-duration: 1700ms;
transition-property: width;}
.timing:hover > div{width: 28vw;}
.rec1{background: darkgrey;transition-timing-function: linear;}
.rec2{background: lightgreen; transition-timing-function: ease-in;}
.rec3{background:burlywood; transition-timing-function: ease-out;}
.rec4{background: pink; transition-timing-function: ease-in-out;}
</style>
<div>
<div class="timing">
<div class='rec rec1'>Linear</div>
<div class='rec rec2'>Ease-in</div>
<div class='rec rec3'>Ease-out</div>
<div class='rec rec4'>Ease-in-out</div>
</div>
</div>
Codes:
<style>
#color{margin-left:4vw; border: 0.4vw solid black; border-radius: 1.5vw; width: 10vw; height: 10vw; transition: 0.5s
ease; background-image: linear-gradient(to bottom left, blue, white);}
#color_a{margin-left:4vw; border: 0.4vw solid red; border-radius: 1.5vw; width: 10vw; height: 10vw; transition: 5s
ease; background-image: linear-gradient(to bottom left, yellow, red);}
:is(#color, #color_a):hover{background-image: linear-gradient(to top right, red, grey, pink);}
</style>
<div>
<div id="color"></div><br>
<div id="color_a"></div>
</div>
Hover over the div element below, to see the transition effect:
Codes:
<style>
div.one {width: 10vw; height: 10vw; background: blue; transition: width 2s;}
div.one:hover {width: 25vw; background-color:red;}
</style>
<p class="spec">Hover over the div element below, to see the transition effect:</p>
<div class="one" style="margin-left:4vw;"></div>
Set the width of the input field to 10vw. However, when the input field gets focus, make it 25vw wide with green background.
Search:
Codes:
<style>
input[type=text] {width: 10vw;-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;}
input[type=text]:focus {width: 25vw;background:green;}
</style>
<p class="spec">Set the width of the input field to 10vw. However, when the input
field gets focus, make it 25vw wide with
green background. </p>
<p class="spec">Search: <input type="text" name="search"></p>