All geek questions in one place

Change animation time in CSS3

Background

I have a CSS3 class that does an icon rotation as an alarm:

@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes swing {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.swing {
  -webkit-animation: swing 1s ease infinite;
  -moz-animation: swing 1s ease infinite;
  animation: swing 1s ease infinite;
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Icon swing</title>
  <meta name="css3 code for icon swinging" content="Icon Swing">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <i class="material-icons swing">alarm</i>
</body>
</html>
Run codeHide result

Problem

The animation works fine and it repeats every second. However, users complain, so I want the animation to run every X seconds, where X is the number selected by the user.

Study

To do this, I did a search on Stackoverflow, which fixed a similar problem by making an animation in the last 30 seconds, but running it in the first 5% of seconds.

This is normal if you have a static limit (for example, I want to run the animation every Y seconds, where Y never changes), but it has no setting.

Questions

  • , X , X ?
  • , 5% ?
+4
1

, , CSS ( ), javascript .

1. X , X ?

, javascript. - setInterval(animateClock, userTime).

id HTML-:

<i id="animated-clock" class="material-icons swing">alarm</i>

infinite 1 CSS:

.swing {
    -webkit-animation: swing 1s ease 1;
    -moz-animation: swing 1s ease 1;
    animation: swing 1s ease 1;
}

javascript :

var userPersonalTimer = user.timer; // Get this value from the user settings, depending on your application.

setInterval( function() {
    var clock = document.getElementById('animated-clock');
    var newClock = clock.cloneNode(true);
    clock.parentNode.replaceChild(newClock, clock);
}, userPersonalTimer);

X (, ) HTML , ( ).

var userPersonalTimer = 5000; // Get this value from the user settings, depending on your application.

setInterval( function() {
    var clock = document.getElementById('animated-clock');
    var newClock = clock.cloneNode(true);
    clock.parentNode.replaceChild(newClock, clock);
}, userPersonalTimer);
.swing {
  -webkit-animation: swing 1s ease 1;
  -moz-animation: swing 1s ease 1;
  animation: swing 1s ease 1;
}

@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes swing {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Icon swing</title>
  <meta name="css3 code for icon swinging" content="Icon Swing">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <i id="animated-clock" class="material-icons swing">alarm</i>
</body>
</html>
Hide result

2. , 5% ?

, , 5% animation-duration. .

.swing {
  -webkit-animation: swing 10s linear infinite;
  -moz-animation: swing 10s linear infinite;
  animation: swing 10s linear infinite;
}

@-webkit-keyframes swing {
  0.75% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  1.5% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  2.5% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  3.25% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  4% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  5% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes swing {
  0.75% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  1.5% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  2.5% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  3.25% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  4% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  5% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Icon swing</title>
  <meta name="css3 code for icon swinging" content="Icon Swing">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <i class="material-icons swing">alarm</i>
</body>
</html>
Hide result
+1

Source: https://habr.com/ru/post/1669360/

More articles:


All Articles