How to apply two different animations to a single div using CSS?

Question

I’ve made a toy example where I want to show in an HTML page an output from a JavaScript function.

Then I would like to apply to this output two different animations using CSS.

When I try to apply the animation (spin clockwise and counterclockwise) separately in two different divs the code is working. But I want to make it work inside the same div using span, the animations are not working.

the code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clock VS countclock</title>

    <style>
        @-webkit-keyframes rotating

        /* Safari and Chrome */
            {
            from {
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes rotating {
            from {
                -ms-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            to {
                -ms-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .rotating {
            -webkit-animation: rotating 5s linear infinite;
            -moz-animation: rotating 5s linear infinite;
            -ms-animation: rotating 5s linear infinite;
            -o-animation: rotating 5s linear infinite;
            animation: rotating 2.5s linear infinite;
        }


        /* ANTIROTATING */
        @-webkit-keyframes .antirotating {
            from {
                -webkit-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }

            to {
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }

        @keyframes antirotating {

            from {
                -ms-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }

            to {
                -ms-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }

        }

        .antirotating {
            -webkit-animation: antirotating 5s linear infinite;
            -moz-animation: antirotating 5s linear infinite;
            -ms-animation: antirotating 5s linear infinite;
            -o-animation: antirotating 5s linear infinite;
            animation: antirotating 5s linear infinite;
        }
    </style>
</head>

<body>
    <!-- this is working -->
    <!-- <div style="text-align: center; font-size: 80px;" id="content2display1" ; class="rotating"></div>
    <div style="text-align: center; font-size: 80px" id="content2display2" ; class="antirotating"></div> -->
    
    <!-- this is NOT working -->
    <span id="content2display1"; class="rotating"></span>
    <span id="content2display2"; class="antirotating"></span>



    <script>


        function foo() {

            rv_j = "hello"
            rv_j = rv_j
            document.getElementById('content2display1').innerHTML = rv_j


            rv_i = "world"
            rv_i = rv_i
            document.getElementById('content2display2').innerHTML = rv_i     

        }

        foo();       
        setInterval("foo();", 5000);
    </script>

</body>

</html>

How can I make the animation work using <span> and not two different <div>?

score 1 · Accepted Answer · answered Dec 11 '22 at 19:44

If you style the span elements with display: inline-block it works.

function foo() {
  rv_j = "hello"
  rv_j = rv_j
  document.getElementById('content2display1').innerHTML = rv_j

  rv_i = "world"
  rv_i = rv_i
  document.getElementById('content2display2').innerHTML = rv_i
}

foo();
setInterval(foo, 5000);

span {
  display: inline-block;
}

@-webkit-keyframes rotating
{
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotating 2.5s linear infinite;
}


/* ANTIROTATING */

@-webkit-keyframes .antirotating {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes antirotating {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.antirotating {
  animation: antirotating 5s linear infinite;
}

<span id="content2display1" class="rotating"></span>
<span id="content2display2" class="antirotating"></span>

could you share just the intuition you had about this? Just what you thought — Gaetano Veti, Dec 11 '22 at 20:06
You did the experiment yourself. The different display properties between div and span makes is an obvious conclusion. — chrwahl, Dec 11 '22 at 20:28

How to apply two different animations to a single div using CSS?

1 Answers1