时间戳

首页 > 解决方案 > 如何使这个 CSS 动画流畅？

html - 如何使这个 CSS 动画流畅？

问题描述

而不是以锯齿状的方式摇摆不定，我希望它在每次旋转之间进行插值。

div {
  border: 1px solid red;
  width: 600px;
  height: 300px;

  animation: shake 0.75s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }

}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div></div>

</body>
</html>

最好没有 JS，但 JS 或 jQuery 就可以了。

标签： htmlcss

解决方案

你必须添加过渡属性和你的 CSS，然后它看起来像这样

div {
  border: 1px solid red;
  width: 600px;
  height: 300px;
  transition: 1s ease-in-out all;
  animation: shake 0.75s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
 25% { transform: rotate(-4deg); }
 50% { transform: rotate(0deg); }
 75% { transform: rotate(4deg); }
100% { transform: rotate(0deg); }
}

如果您发现很难看到更改，请减少动画时间并增加过渡时间

推荐阅读