What is the process for adding two separate animations to one div using CSS?

I have created a simple example where I aim to display the output of a JavaScript function on an HTML page.

Furthermore, I want to apply two different animations using CSS to this output.

When attempting to apply the animations (clockwise and counterclockwise spins) separately to two different divs, the code works as expected. However, when trying to make them work within the same div using span elements, the animations do not work.

Here is the code snippet:

<!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 {
            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 works -->
    <!-- <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 does NOT work -->
    <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>

Is there a way to make the animation work using <span> instead of separate <div> elements?

javascripthtmlcss

Answer №1

To achieve the desired effect, apply display: inline-block to the span elements.

function bar() {
  rv_k = "hi"
  rv_k = rv_k
  document.getElementById('content2display3').innerHTML = rv_k

  rv_l = "there"
  rv_l = rv_l
  document.getElementById('content2display4').innerHTML = rv_l
}

bar();
setInterval(bar, 5000);
span {
  display: inline-block;
}

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

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

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


/* ANTISPINNING */

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

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

.antispinning {
  animation: antispinning 5s linear infinite;
}
<span id="content2display3" class="spinning"></span>
<span id="content2display4" class="antispinning"></span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choose a radio button with a dynamic value in Selenium

How can I automatically select the radio button below with a changing value attribute? HTML: <form name="ViewQueryForm" method="post" action="/equery/getAttachments.do"> <div class="txt_align_left innerdvcont&q ...

pythoncssseleniumselenium-webdriverelement

Bespoke email solution for Woocommerce on the Wordpress platform

I have developed a unique HTML template with inline styles for the 'customer processing order' email notification in Woocommerce. I stored the template in my themes folder at woocommerce/templates/emails/customer-processing-order.php. However, I ...

phphtmlwordpressemailwoocommerce

Error 404 occurred when trying to access the webpack file at my website address through next js

Check out my website at https://i.stack.imgur.com/i5Rjs.png I'm facing an error here and can't seem to figure it out. Interestingly, everything works fine on Vercel but not on Plesk VDS server. Visit emirpreview.vercel.app for comparison. ...

javascriptreactjsnext.jsplesk

How can I insert an array of string elements into a template element's value attribute in Angular 2?

Inside my Angular 2 component class, I have an array named myArray: @Component({ templateUrl: 'my.component.html' }) export class MyComponent { private myArray: Array<string>; ... } The corresponding HTML file my.component.ht ...

javascriptjqueryangulartypescript

Displaying HTML content using Typescript

As a newcomer to typescript, I have a question regarding displaying HTML using typescript. Below is the HTML code snippet: <div itemprop="copy-paste-block"> <ul> <li><span style="font-size:11pt;"><span style="font-family ...

javascripthtmltypescript

What's the best way to showcase information from a document on the screen?

Every time I visit the '/gallery' route, the data from the 'posts.json' file is retrieved. By utilizing the 'fs' module and the read() method, the data is read from the file and stored in the this.pictures array. However, upon ...

javascriptnode.jsexpressecmascript-6routes

Is it possible to utilize the computed value from one query in a subsequent query?

I am performing a calculation for one parameter (X) in the following manner: <?php $link=mysql_connect("localhost","root",""); mysql_select_db("hand"); $result = mysql_query("select * from sessions",$link); $num_calls = mysql_num_rows($result); echo ...

phpmysqlhtmlsql

Having trouble creating a report with an HTML screenshot using Protractor

Need assistance with generating reports using a html screenshot in Protractor. I have followed all the necessary steps but encountered an error. Any help would be appreciated. Here is my conf.js: // Sample configuration file. var HtmlReporter = require(& ...

javascriptangularjsnode.jstestingprotractor

"Encountering problem with Angular HTTP services: the requested URL is not

Attempting to send data to API servers is resulting in a 404 error. Testing it on Postman shows that everything works fine. JSONP is being used for posting data due to cross-domain issues. The console displays the following: GET http://myapi.com/registrat ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-services

The gltf model fails to load on Chrome for Android when using Threejs

I encountered an issue while attempting to showcase a basic GLTF 3d model on my website. Surprisingly, it functions smoothly on desktop Mac and Windows, as well as on iOS in Safari and Firefox. However, it fails to load on Android's Chrome browser. St ...

javascriptandroidreactjsthree.jsgltf

Toggle React like button

I am working on a component that displays the number of likes next to a 'like' button. I want to implement a functionality where clicking the button once adds to the number of likes, but if clicked again, it reverts back to the previous state. Th ...

javascriptreactjsfrontend

PDF files encoded in base64 are not displaying properly in Chrome

There seems to be an issue with certain PDF files not rendering properly in Chrome browser but working fine in Firefox. Interestingly, all files render correctly when embedded directly. <object id="content-view" :data="content_view.base64" type="applic ...

htmlpdfiframebase64embed

I'm encountering an issue with my function in Vuejs where it is only going through one loop before breaking out. How can I

I'm attempting to validate all items in the cart and disable the sell button if the item is already in the cart (I have this implemented for other functionalities). It seems like my loop is only iterating once before stopping. Any suggestions on how I ...

javascriptperformancevue.js

Event on FullCalendar is directing to an incorrect URL

After integrating FullCalendar to my website following a tutorial, everything seems to be working fine except for the URLs added to events on the calendar. Instead of directing me to the specified URL when I click on an event, it redirects me to a differen ...

javascriptphpmysqlurlfullcalendar

What is the method for getting js_xlsx to include all empty headers while saving the file?

In the midst of developing a Meteor App, I've incorporated the Node.js package known as "js_xlsx" from "SheetJS", produced by "SheetJSDev". This tool enables me to convert an Excel sheet uploaded into JSON on the backend. The intention is to store thi ...

javascriptjsonnode.jsmeteorjs-xlsx

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

When the routes are multiple levels, such as http://www.example.com/profile/view, the RequireJS is failing to resolve dependencies properly. However, if the route is just http://www.example.com/view, the controller dependency is resolved correctly. Below ...

javascripthtmlangularjsrequirejsangular-ui-router

What is the best way to use form input to filter an Observable?

Within my component, I have declared the variable "countries$": countries$!: Observable<Country[]>; To populate this variable with data from this API, I use the following code in the "ngOnInit" lifecycle hook: ngOnInit(){ this.countries$ ...

javascriptangulartypescriptrxjsobservable

Is Javascript Functioning Properly?

Similar Question: How do I determine if JavaScript is turned off? Can we identify whether javascript has been disabled and then redirect to a different page? I am currently working on a project using JSPs, where I have integrated various advanced java ...

javascriptjsp

Another option instead of using useCallback

Forgive me if this is a novice inquiry, but I am still learning JavaScript and React. I recently discovered the necessity of utilizing useCallback to wrap callback functions in order to prevent them from being recreated constantly when used within a fun ...

javascriptreactjsscope

What could be causing my class to not be affecting a specific element in Sass?

Using React and sass, I attempted to utilize the activeClassName property on a NavLink component but found that my active class was not working as expected due to its order in relation to the default class. How can I resolve this issue? Here is the code: ...

cssreactjssass