How do I add simple css effects using transitions?

[hoodedvul]

CSS transitions adds a visual effect to a property.

HTML.

...
<div class="box">Box</div>
...

CSS.

...
.box {
        width: 200px;
        height: 300px;
        background-color: crimson;
        transition-property: width;
        transition-duration: 1s;
        transition-timing-function: ease;
      }

      .box:hover {
        width: 300px;
...

The result of the static view of the box:

The result when you hover over the box.

Using the CSS transitions property, the box width gradually transitions to the width defined under the CSS hover effect. In this case with a 1 second delay, 1 second duration and width changes from 200px to 300px.

There are predefined values that can be used using the transitions-timing-function

To see the animated effect, try it out on WS3: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

For more information see W3S link: CSS Transitions

As with CSS background properties the transition properties can be used in short form.