ramin ramin - 6 months ago 16
CSS Question

How to change the value depend on css animation?

I have one css animation



#sun {
position: absolute;
width: 55px;
height: 55px;
border: 1px solid red;
background-color: orange;
opacity: 0.9;
border-radius: 100%;
text-align: center;
animation: round 3s infinite linear;
}
@keyframes round {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg)
}
}

<p id="sun">sun</p>
<p id="demo">1</p>





If the value of demo id change depend on sun rotate. What should I do? Some example the demo initial value was
1
At the time sun move 25%. The value of the demo increase with
2.5
. Sun rotate one full circle the value of demo is 10. How can I do this using jquery /javascript

Please help me.

Answer

By using css we can do...

 <!doctype html>
    <html>
    <head>
    <style>
    #sun {
      position: absolute;
      width: 55px;
      height: 55px;
      border: 1px solid red;
      background-color: orange;
      opacity: 0.9;
      border-radius: 100%;
      text-align: center;
      animation: round 3s infinite linear;
    }
    #demo:after {
      content: "1";
      animation: round1 3s infinite linear;
    }
    @keyframes round {
    	0%   {transform: rotate(0deg);}
        25%  {transform: rotate(90deg);}
        50%  {transform: rotate(180deg);}
        75%  {transform: rotate(270deg);}
        100% {transform: rotate(360deg);}
    }
    @keyframes round1 {
    	0%   {content: "1";}
        25%  {content: "2.5";}
        50%  {content: "5";}
        75%  {content: "7.5";}
        100% {content: "1";}
    }
    </style>
    
    </head>
    
    <body>
    <p id="sun">sun</p>
    <p id="demo"></p>
    </body>
    
    </html>