CSS - animation with transition property example
Tags: javascript, html, css, webdev
Published: 2021-03-04 21:22:43

Hello there! 👋😊

In this article, I would like to show you how to use one of the coolest style property in CSS - transition. 😎⏭

__Before we start__, I would highly recommend you to check out the __runnable example__ for the solution on our website:
[CSS - animation with transition property example](https://dirask.com/posts/10rkAp)

Final effect:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpg0qape8kkeej5y20np.png)

Below example presents three CSS styles: 

- `.normal` which is the default style of our div element,
- `.transformed` which is transformed style of our div element,
- `.button` which is style of our button element.

The styles of our div have transition value set to `'1s'`. It means our component will change it's property values smoothly, over a given duration (over `1s`). Additional `transform` parameter describes moving of an element. In our case `transform` rotates the element during `2s`.

Runnable example:
```html
<!doctype html>
<html>
  <head>
    <style>
      .normal {
        margin: 50px;
        padding: 20px;
        border-radius: 10px;
        width: 100px;
        height: 100px;
        background: #06F2FF;
        box-shadow: 5px 5px 5px #04bd57;
        transition: 1s,  transform 2s
      }

      .transformed {
        margin: 50px;
        padding: 20px;
        border-radius: 10px;
        width: 150px;
        height: 150px;
        background: #06FF76;
        box-shadow: 5px 5px 5px #3085d6;
        transition: 1s, transform 2s;
        transform: rotate(180deg)
      }

      .button {
        padding: 2px;
        border: 2px solid white;
        background: black;
        box-shadow: 5px 5px 5px grey;
        text-shadow: 1px 1px 1px black;
        font-weight: 900;
        color: white;
        border-radius: 10px;
      }
    </style>
    <script>
      function myFunction() {
        var element = document.getElementById("my-div");
        if(element.classList[0] == "normal"){
          element.classList.remove("normal");
          element.classList.add("transformed");
        }
        else if(element.classList[0] == "transformed"){
          element.classList.remove("transformed");
          element.classList.add("normal");
        }
      }
    </script>
  </head>
  <body>
    <div style="height: 300px">
      <div id="my-div" class="normal">
        <button class="button" onclick="myFunction()">Click me</button>
      </div>
    </div>
  </body>
</html>
```
You can run this example [here](https://dirask.com/posts/10rkAp)

>📝 Note:
>If the duration is not specified, the transition will have no effect, because the default value is `0`.

If you found this solution useful and would like to receive more content like this leave a comment or reaction 💗🦄💾. 
Thanks for your time and see you in the upcoming posts! 😊

_____________
## Write to us! ✉
If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on [dirask.com -> Questions](https://dirask.com/questions)

You can also join our [facebook group](https://www.facebook.com/groups/125343696143974) where we share  coding tips and tricks with others! 🔥