Question 260199 in Html Question posted in
Some basic documentation can be found here.

Html – is it possible to use javascript to change the animation property of a div? on click

I’m trying to create a loading screen that on click it will rotate faster. is it possible to change the specific 2s property to y to accomplish this or do I have to change what I have tried, or is it the style.animation = "";. the only thing is that changing the speed in css with animation won’t keep the speed cause you can’t use .loading:onclick it would be .loading:active right? so it will only be sped up when I am holding the mouse down so I need a work around either for css or js.

var y = 0.1;

function fast() {
  document.getElementById("a").style.animation = "animateC ys linear infinite";
    document.getElementById("b").style.animation = "animate ys linear infinite";
}
body
{
  margin:0;
  padding:0;
  background:#262626;
}
.loading
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  background:transparent;
  border:3px solid #3c3c3c;
  border-radius:50%;
  text-align:center;
  line-height:150px;
  font-family:sans-serif;
  font-size:20px;
  color:#fff000;
  letter-spacing:4px;
  text-transform:uppercase;
  text-shadow:0 0 10px #fff000;
  box-shadow:0 0 20px rgba(0,0,0,.5);
}
.loading:before
{
  content:'';
  position:absolute;
  top:-3px;
  left:-3px;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid #fff000;
  border-right:3px solid #fff000;
  border-radius:50%;
  animation:animateC 2s linear infinite;
}
span
{
  display:block;
  position:absolute;
  top:calc(50% - 2px);
  left:50%;
  width:50%;
  height:4px;
  background:transparent;
  transform-origin:left;
  animation:animate 2s linear infinite;
}
span:before
{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff000;
  top:-6px;
  right:-8px;
  box-shadow:0 0 20px #fff000;
}
@keyframes animateC
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}
@keyframes animate
{
  0%
  {
    transform:rotate(45deg);
  }
  100%
  {
    transform:rotate(405deg);
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="script.js"></script>
</head>
<load>
  <div class="loading" id="a" onclick="fast()">Loading<span id=
                                                        "b"></span></div>
</load>


</html>
Tags:

2

Answers


  1. 0

    Yes, you set the value of the animation property with a string, so just build the string to include the value of your variable.

    var y = 0.1;

function fast() {
  document.getElementById("a").style.animation = `animateC ${y}s linear infinite`;
  document.getElementById("b").style.animation = `animate ${y}s linear infinite`;
}
    body
{
  margin:0;
  padding:0;
  background:#262626;
}
.loading
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  background:transparent;
  border:3px solid #3c3c3c;
  border-radius:50%;
  text-align:center;
  line-height:150px;
  font-family:sans-serif;
  font-size:20px;
  color:#fff000;
  letter-spacing:4px;
  text-transform:uppercase;
  text-shadow:0 0 10px #fff000;
  box-shadow:0 0 20px rgba(0,0,0,.5);
}
.loading:before
{
  content:'';
  position:absolute;
  top:-3px;
  left:-3px;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid #fff000;
  border-right:3px solid #fff000;
  border-radius:50%;
  animation:animateC 2s linear infinite;
}
span
{
  display:block;
  position:absolute;
  top:calc(50% - 2px);
  left:50%;
  width:50%;
  height:4px;
  background:transparent;
  transform-origin:left;
  animation:animate 2s linear infinite;
}
span:before
{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff000;
  top:-6px;
  right:-8px;
  box-shadow:0 0 20px #fff000;
}
@keyframes animateC
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}
@keyframes animate
{
  0%
  {
    transform:rotate(45deg);
  }
  100%
  {
    transform:rotate(405deg);
  }
}
    <div class="loading" id="a" onclick="fast()">
  Loading
  <span id="b"></span>
</div>
    Login or Signup to reply.
  2. 0

    Yes it is possible – the CSS animation property is short hand for multiple properties, amongst which animation-duration sets the speed.

    Half of the desired outcome can be achieved by setting the b element’s style.animationDuration value to an lesser value:

    function fast() {
  document.getElementById("a")
   .style.animation = "animate ys linear infinite";
  document.getElementById("b")
    .style.animationDuration = 500ms; // this works
}

    Now the bad new: updating the animation duration style property on the "a" element doesn’t work at all, possibly because the pseudo element with the transparent border quadrant is the animated element, not the .loading element itself. Whatever the reason it didn’t work in either Firefox or Edge (a webkit browser I use for testing).

    Looking at the animation code for the .loading element made me realise that I personally would start over from scratch, working from the bottom up – with say a single animated element with relative positioning, with either a child element or pseudo element with the colored circle positioned with respect to the border, placed on top of a non animated element containing the "Loading" message and working further up to place that assemblage on the page. If you prefer to try modifing the posted code to work, more power to you! 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search