html - CSS动画摆动效果

标签 html css css-transitions css-animations

<分区>

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。

关闭 7 年前。

Improve this question

我发现这个非常有趣的 css 动画效果。但是，我的知识不足以找到问题所在。如果有人可以帮助我，我将非常感激。提前致谢。

PS:我的想法很简单，悬停在div上就开始摆动。

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  position:relative;
  width:100px;
  height:100px;
  background-color:red;
}

.swing:hover{
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

<div class="swing"></div>

最佳答案

看起来您只是错过了动画持续时间:

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  position:relative;
  width:100px;
  height:100px;
  background-color:red;
}

.swing:hover{
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
  animation-duration: 1s;
}

<div class="swing"></div>

MDN doc for animation-duration

或者您可以使用 animation shorthand property 来更简洁一点.

.swing:hover{
  -webkit-transform-origin: top center;
  transform-origin: top center;
  animation: swing 1s;
}

关于html - CSS动画摆动效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36120297/

上一篇：html - Chrome Extension - 如何设置 Extension Popup 的列宽

下一篇：css - 修复了 Safari 中带有神秘边距的页眉

相关文章：

javascript - 样式 innerHTML

html - 元素流出溢出

html - 如何使用动画限制每行的元素？

javascript - 在 react 中设置按钮动画

python - 按列组织表格数据

html - 通过引用托管在不同网站上的外部热链接图像来应用 CSS

jquery - 如何在媒体查询中使用 jQuery 最小化列的高度？

jquery - CSS3/jQuery 转换在 Firefox 中不起作用？

javascript - History.js 和 url 编码

html - 将水平滚动条应用于电子邮件中的宽图像