How to Transition Element Styles in CSS

CSS transitions are a simple and effective way to add smooth animations to your website. They allow you to change the style of an element over time, creating more visually appealing designs.

Basic Syntax for the property:

transition: property duration timing-function delay;

• Replace “property” with the property you want to animate.
• Instead of “duration” write how long you want it to take for the animation to finish, fx: “0.5s”
• Replace the “timing-function” with the timing function you want, fx: “ease” or “linear”
• Replace delay with how logn to wait before starting the animation.

Example – Hover Effect:

HTML:

<button class="my-button">Hover Me</button>

CSS:

.my-button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Apply transition */
}

.my-button:hover {
  background-color: #2ecc71;
}

You can also transition multiple properties at once by using a comma like this:

transition: background-color 0.3s ease, transform 0.5s ease;

or you can use “all” instead of your property, like this:

transition: all 0.5s ease;