在CSS3中更改动画时间

2019年7月28日 136次阅读

背景

我有一个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: repeat animation every 30 seconds

如果你有一个静态限制(就像我想每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类中将动画的迭代次数从无限设置为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％秒内运行？

正如我在上一个问题中所说的那样,这是可能的,但这里是如何让它在动画持续时间的前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>
点赞