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

PreviousModes of passing variablesNextHTML data attributes

Last updated