CSS transitions
CSS transitions allows you to change property values smoothly, over a given duration. nstead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
Example
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
.box {
width: 60px;
height: 60px;
background-color: rgb(211, 194, 247);
transition: all 2s;
margin: 5px;
}
.box:hover {
width: 700px;
background-color: rgb(2, 187, 17);
}
Properties you can edit are:
transition-duration
transition-property
transition-timing-function
transition-delay
References
Last updated
Was this helpful?