时间戳

首页 > 解决方案 > .flip-button-icon - CSS - 让它在页面加载时摇晃

css - .flip-button-icon - CSS - 让它在页面加载时摇晃

问题描述

我是 CSS / Divi 的新手，但是 Google 并花了最后 2 多个小时试图做到这一点......所以请给我一些松懈。=)

很高兴为他们的时间给慷慨的帮手小费，可能会节省我半天的时间来弄清楚......

CTA 按钮有这个图标>>，我希望它在页面加载时晃动。（很高兴它在鼠标悬停时继续摇晃）

当前代码（悬停时可以正常工作，但不那么花哨）

.flip-button-icon:hover:after 
{
  transition: transform 1000ms;
}
.flip-button-icon:hover:after 
{
  transform: translate(5px);
}

//试图使这项工作，但失败..

    0% { transform: translate(0px); }
   25% { transform: translate(5px); }
   50% { transform: translate(0px); }
   75% { transform: translate(5px); }
  100% { transform: translate(0px); }

无论如何你明白了....大声笑

标签： css

解决方案

看看我刚刚创建的这个例子：（在网上找到了一个不错的摇动动画）

.flip-button-icon:hover {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
<div class="flip-button-icon" style="background-color:#f00;height:20px;width:20px;"></div>

如果您希望您的按钮在页面加载时抖动，您将不得不使用 JavaScript。

推荐阅读