"Shake" CSS 关键帧动画 | CSS-Tricks

这假设使用的是自动前缀器。

.face: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);
  }
}

查看 CodePen 上的 Sarah Drasner (@sdras) 的 Pen “Shake” CSS 代码段，用于 CSS-Tricks，地址：CodePen。

fardin

# 2015 年 12 月 1 日

您好

Kyrre

评论永久链接# 2016 年 6 月 1 日

嗨
2srenu

评论永久链接# 2016 年 11 月 24 日

壮丽的山峰
LukeZzz

评论永久链接# 2017 年 10 月 27 日

这东西 skrrrrrra 了

Farzad YZ

# 2016 年 1 月 4 日

实际上，了解运动的对称性有助于理解此动画的基础知识。您是如何实际找到最佳三次贝塞尔曲线作为时间函数的？

Andy

评论永久链接# 2016 年 2 月 5 日

我使用 http://easings.net/en
它提供了一些不错的示例供选择！

Sarah Drasner

# 2016 年 1 月 4 日

嗨，Farzad！很高兴它有用。我是通过反复试验得到三次贝塞尔曲线的，但我在使用 Lea Verou 的工具 http://cubic-bezier.com/ 进行了很多实验。

Farzad YZ

评论永久链接# 2016 年 1 月 4 日

感谢您的快速回复
talha kaan özkan

评论永久链接# 2016 年 8 月 22 日

您好
Sandro Alves Peres

评论永久链接# 2016 年 10 月 3 日

不错的效果，非常有用 ^_^
2srenu

评论永久链接# 2016 年 11 月 24 日

.face: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);
}
}

monfared

# 2016 年 1 月 5 日

很小的效果，很不错... 谢谢

Lionel

# 2016 年 4 月 3 日

以防万一有用，还有 CSShake，它提供了一些可用的自定义选项。

Prad

# 2016 年 4 月 20 日

它对 svg 有效吗？我想对 svg 图标使用动画，比如这个 http://migrera.com

Lionel

评论永久链接# 2016 年 4 月 20 日

当然，它对 svg 有效，您还可以定位图标的某些部分。这里有一个示例，使用 CSShake
Prad

评论永久链接# 2016 年 4 月 20 日

这真的很棒。谢谢，Lionel。
Sarah Drasner

评论永久链接# 2016 年 4 月 20 日

这篇文章中的示例本身就是一个 SVG :) 您可以点击编辑按钮查看 CodePen 上的所有代码。
David

评论永久链接# 2018 年 7 月 24 日

不过，如果你们被迫关心 IE11 :(
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
Sarah Drasner

评论永久链接# 2018 年 7 月 25 日

如果您需要支持 IE，您可以将动画放在一个包装它的 div 上，或者放在 SVG 标签本身（就像您在这个 Pen 中看到的那样）。SVG 元素仍然是一个 HTML 元素，因此它仍然可以在该浏览器中进行动画。

如果您想在旧版浏览器的 SVG DOM 中进行动画，GreenSock 是您的最佳选择，它可以追溯到 IE9。
David

评论永久链接# 2018 年 7 月 25 日

对于非 CSS 动画，我使用 SnapSVG 也取得了不错的效果

Prad

# 2016 年 4 月 20 日

现在看到了...:) 感谢您的文章，Sarah。

mnbf

# 2016 年 5 月 14 日

sgdfg

Marco

# 2016 年 5 月 30 日

很棒的动画。不过有一个问题：如何打开/关闭此动画？

因为我通过 Jquery 添加了一个类（“shake”），但是当我删除它并再次添加它时，或者当我使用 toggleClass 函数时，动画不会发生。

谢谢

Lionel

评论永久链接# 2016 年 5 月 31 日

应该有效。

看看修改过的 Pen，其中点击脸部会添加 shake 类。还在动画结束后添加了 removeClass。
Marco

评论永久链接# 2016 年 6 月 3 日

它有效了。谢谢 :)

mike

# 2016 年 7 月 26 日

感谢您的文章。这在 IE 11 中不起作用。您知道如何解决吗？图像在移动时会消失，然后在移出时会以轻微的动画恢复，但我需要图像不要消失。
谢谢！

Merlin

# 2016 年 9 月 8 日

为什么使用 perspective 和 backface-visibility？

我在 CodePen 中删除了它们，没有出现问题。它们对某些浏览器是必需的吗？

Sarah Drasner

评论永久链接# 2018 年 7 月 25 日

它们用于硬件加速

toby

# 2016 年 10 月 12 日

这太棒了，感谢您的发布。

我应该修改什么来减少抖动量？我可以调整时间，但似乎无法减少水平移动，我只希望它更微妙？我尝试了所有变量，但似乎无法更改它。

谢谢

ANDRES TRUJILLO

# 2016 年 10 月 17 日

您好 :)

如何使抖动函数垂直方向？

谢谢

2srenu

评论永久链接# 2016 年 11 月 24 日

页面标题

我的第一个标题

我的第一段。

nitesh

# 2016 年 10 月 26 日

不错的教程

Hubert

# 2016 年 10 月 26 日

嗨,

感谢您的教程。我遇到了一点问题，因为我在垂直居中的按钮内绝对定位了图标。shake 关键帧中的 translate3D 导致图标跳到底部，然后从一侧到另一侧抖动。如何解决这个问题？谢谢

.quick_basket .button::after {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
.quick_basket .button:hover::after {animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, inherit, 0); backface-visibility: hidden; perspective: 1000px;}

Pranab

# 2016 年 12 月 23 日

如果我只使用 translateX 而不是 translate3d 并删除 perspective...那么它可以正常工作。
那么，使用 translate3d 的优势是什么？

lukejpreston

# 2018 年 6 月 15 日

我认为没有，这似乎表现相同

.shake:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {
    10%, 90% {
        transform: translateX(-1px);
    }
    20%, 80% {
        transform: translateX(2px);
    }
    30%, 50%, 70% {
        transform: translateX(-4px);
    }
    40%, 60% {
        transform: translateX(4px);
    }
}

soni103101

# 2018 年 5 月 22 日

它对 svg 有效吗？我可能希望对 svg 符号使用此动画，比如这个 https://www.movingsolutions.in

Roland Kaiser

# 2018 年 7 月 1 日

我可以在 PrestaShop 中使用它吗？如何为那里的按钮添加动画？

Geoff Graham

评论永久链接# 2018 年 7 月 1 日

嗨，Roland！我个人不熟悉 PrestaShop，但如果他们允许您编辑 CSS 并且您有按钮的类名，那么您就可以使用该动画。:)

Ajay Sharma

# 2018 年 12 月 31 日

我想在 Google 搜索结果的元标题和描述中显示 SVG 符号。我可以使用 utf-8 字符集吗？还是需要使用 iso 或其他字符集格式？

简要阅读

# 2020 年 5 月 5 日

一个非常棒的关键帧动画。
继续分享

Carrie

# 2020 年 6 月 16 日

这太棒了！如果图像在折叠区域下方，我想在他们向下滚动到该图像时让它抖动，您能告诉我我在 CSS 中可能添加什么吗？否则，当没有人能看到它时，它就会抖动。

我想使用抖动来指示某些东西是可点击的。

Caliper

# 2022 年 4 月 3 日

嘿，我希望它在页面加载完成后自动抖动

seema delhi

# 2024 年 5 月 11 日

它对 SVG 有效吗？我想将动画用于 SVG 图标，例如这个：
https://kmassage.net/spa-in-paharganj/

Geoff Graham

评论永久链接# 2024 年 5 月 13 日

当然！实际上，如果您打开演示的 HTML 面板，您会看到它也使用了 SVG。

评论

发表评论 取消回复

发表评论取消回复