背景
我有一个CSS3类，它可以像闹钟一样摆动图标：
@-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>问题
动画效果很好，每秒钟都会重复一次。但是，用户会抱怨，所以我希望动画每X秒运行一次，其中X是用户选择的数字。
研究
为了实现这一点，我在Stackoverflow中进行了搜索，通过使动画持续30秒，但在前5%秒内运行，解决了类似的问题。
- CSS：每30秒重复一次动画
如果你有一个静态限制(比如我想每Y秒运行一次动画，其中Y永远不会改变)，但它缺乏自定义，这是可以的。
问题
- 是否可以使此动画每X秒运行一次，其中X可以更改
- 如果没有，如何将此动画更改为在前5%秒内运行
首先，因为用户可以更改时间，而且很难动态更改CSS(但并非不可能)，所以我建议使用javascript。
1.是否可以使此动画每X秒运行一次，其中X可以更改
是，使用javascript。你可以使用类似setInterval(animateClock, userTime)的东西。
为HTML元素设置id：
<i id="animated-clock" class="material-icons swing">alarm</i>
在CSS类中设置动画从infinite到1的迭代次数
.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>2.如果没有，我如何将此动画更改为在前5%秒内运行
正如我在上一个问题中所说，这是可能的，但以下是如何使其在animation-duration的前5%期间运行。你只需要计算百分比。
.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>