css - 在 CSS3 中更改动画时间

标签 css animation

背景

我有一个 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% 秒内运行来解决了类似的问题。

如果你有一个静态限制(比如我想每 Y 秒运行一次动画，其中 Y 永远不会改变)，这很好，但它缺乏定制。

问题

  1. 是否可以让此动画每 X 秒运行一次，其中 X 可以更改？
  2. 如果不是，我如何将此动画更改为也在前 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>

关于css - 在 CSS3 中更改动画时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42158090/

上一篇：css - 如何修改 Ionic 2 slider 以使其具有多行(网格类型 4x4，每页 16 个)？

下一篇：CSS:如何使用 hsl 颜色仅更改一个值

相关文章：

animation - react 原生动画 : Spring Speed

html - SVG圆形动画

javascript - JQuery动画更多元素

javascript - 在 [Timestamp_1, Timestamp_2] 期间将对象从 Position_1 移动到 Position_2

html - 在导航子菜单时保持父类悬停

带 float 下划线后的 CSS 伪

javascript - Imageslider 不会进入后台

jquery - 网站日历 slider

javascript - 使用 jQuery 禁用无效

css - CSS Animation\Transformation 中的旋转方向

©2024 IT工具网  联系我们