Languages
[Edit]
EN

CSS - animation with transition property example

3 points
Created by:
Dirask Community
5850

Hello there! 👋 😊

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

Final effect:

CSS - transition property example (spinning square div)
CSS - transition property example (spinning square div)

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 has 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:

// ONLINE-RUNNER:browser;

<!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>

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

Related posts

CSS - Blog posts

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join