如何制作抖动动画

抖动动画是一种常见的动画效果，通过快速连续地改变元素的位置或属性，使其产生抖动的效果。下面是制作抖动动画的一种常见方法：

使用CSS3的关键帧动画（@keyframes）来创建抖动效果。关键帧动画允许我们定义在不同时间点上元素的样式。
首先，选择要应用抖动动画的元素，可以是一个图片、文字或其他HTML元素。
在CSS样式表中，使用@keyframes关键字定义一个动画名称，并指定动画的关键帧。

@keyframes shake {

 0% { transform: translateX(0); }

 10% { transform: translateX(-10px) rotate(-5deg); }

 20% { transform: translateX(10px) rotate(5deg); }

 30% { transform: translateX(-10px) rotate(-5deg); }

 40% { transform: translateX(10px) rotate(5deg); }

 50% { transform: translateX(-10px) rotate(-5deg); }

 60% { transform: translateX(10px) rotate(5deg); }

 70% { transform: translateX(-10px) rotate(-5deg); }

 80% { transform: translateX(10px) rotate(5deg); }

 90% { transform: translateX(-10px) rotate(-5deg); }

 100% { transform: translateX(0); }

}

在上面的代码中，我们定义了一个名为"shake"的动画，通过改变元素的transform属性来实现抖动效果。关键帧的百分比表示动画的进度，0%表示动画开始时的样式，100%表示动画结束时的样式。

接下来，将定义好的动画应用到元素上。

.element {

 animation: shake 0.5s infinite;

}

在上面的代码中，我们将名为"shake"的动画应用到类名为"element"的元素上。通过animation属性，我们指定了动画的名称、持续时间和循环次数（这里使用infinite表示无限循环）。

最后，可以通过调整关键帧的样式和动画的持续时间来定制抖动效果的幅度和速度。

@keyframes shake {

 0% { transform: translateX(0); }

 10% { transform: translateX(-20px) rotate(-10deg); }

 20% { transform: translateX(20px) rotate(10deg); }

 30% { transform: translateX(-20px) rotate(-10deg); }

 40% { transform: translateX(20px) rotate(10deg); }

 50% { transform: translateX(-20px) rotate(-10deg); }

 60% { transform: translateX(20px) rotate(10deg); }

 70% { transform: translateX(-20px) rotate(-10deg); }

 80% { transform: translateX(20px) rotate(10deg); }

 90% { transform: translateX(-20px) rotate(-10deg); }

 100% { transform: translateX(0); }

}

.element {

 animation: shake 1s infinite;

}

在上面的代码中，我们增加了translateX的位移和rotate的旋转，使抖动效果更加明显，并将动画的持续时间延长到1秒。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，满足各种计算需求。产品介绍链接
腾讯云云数据库MySQL版：高性能、可扩展的关系型数据库服务。产品介绍链接
腾讯云内容分发网络（CDN）：加速内容分发，提升网站访问速度和用户体验。产品介绍链接
腾讯云人工智能（AI）：提供丰富的人工智能服务和工具，帮助开发者构建智能化应用。产品介绍链接
腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联设备。产品介绍链接
腾讯云移动推送（TPNS）：高效、稳定的移动消息推送服务，支持多种推送方式。产品介绍链接

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和情况进行。

页面内容是否对你有帮助？

有帮助

没帮助

如何制作“抖动”动画

、、、、

我想让它从左到右摇动一下(动画)。我写了这段代码，但是，它不能工作。

浏览 10提问于2012-10-03得票数 15

回答已采纳

3回答

如何制作抖动动画

、、、

但当我将鼠标放在那里时，标签开始出现并摇晃，但我不知道如何使摇动错误消失 $('#demo').mouseleave

浏览 29提问于2018-01-17得票数 0

1回答

使用Flutter/Dart翻转和摇动瓷砖动画？

、

整个游戏逻辑已经被编码了Up..only动画是挂起的当用户点击任何随机瓦片翻转瓦片应该发生，当试图匹配不匹配瓦片抖动动画应该发生，他们应该再次翻转回来。

浏览 0提问于2018-04-02得票数 2

1回答

使用JavaScript缩放动画时的抖动文本

、、

当使用缩放来更改包含文本的HTML元素的大小时，文本在动画期间会产生抖动，但只在使用JavaScript库动画的情况下。这种抖动不会在CSS动画或使用相当新的JavaScript网络动画API的动画中发生。在某些浏览器中似乎也没有发生这种情况。(在我的iPhone) 为了方便地比较不同的元素缩放方法和它们的显示方式，我<em

浏览 4提问于2017-06-09得票数 1

1回答

我正在使用SVG创建一个社会太阳系，您可以查看。以下是SVG代码： <svg width="1384px" height="1384px" viewBox="0 0 1384 1384" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"&

浏览 2提问于2014-03-17得票数 2

回答已采纳

3回答

无法实现流畅的javascript动画

、、、

我尝试过很多不同的javascript框架，比如jquery，甚至像$fx这样的动画专用框架，我都无法达到我想要的流畅度。我最近看到了两个非常流畅的动画例子，要么是在电脑上，要么是在iPhone和iPad上。它们是如何实现如此流畅的动画的？我一直在用jquery或$fx制作非常简单的文本，比如简单的文本从页边距顶部: 100px到500px，而且它很抖动……

浏览 2提问于2012-01-07得票数 2

1回答

如何在“反应本土化”中制作震动图像动画？

、、、、

当我按下TouchableOpacity.时，我想制作一个震颤的图像动画const backgroundImage = require('.this.handleAnimation}></TouchableOpacity> 这是我制作

浏览 0提问于2018-12-12得票数 5

回答已采纳

1回答

如何同时运行两个CSS动画？

、、、

这是我的代码：我有两个动画名为悬浮和摇。抖动一个应该在3s之后执行，所以在第一个悬停期间，因为这个时间集是7s。但是它所做的是，当抖动启动时，它停止悬停，即使是悬停，也应该还有4s。我试着一次制作所有的动画，但是它没有正确地工作。@key

浏览 4提问于2020-05-25得票数 0

回答已采纳

2回答

Swf剪辑运行缓慢

我已经在Flash中制作了一个简单的动画，并将其导出为swf。问题是，电影运行缓慢，抖动，或者换句话说，正在以慢动作播放。我已经更改了帧率，但幸运的是，视频播放器/编解码器有问题吗？*编辑1:剪辑没有任何代码，是手绘在6层上；另外，当我在Adobe Premier中导入这部电影并在.avi中导出时，抖动效果消失了。

浏览 1提问于2012-01-11得票数 1

回答已采纳

1回答

处于中心位置的WPF中的ElasticEase动画

、

我试图在WPF中使用ElasticEase-函数制作一个抖动动画。我希望它在完工后能保持在同一个位置。就像现在一样，每当动画播放的时候，我正在制作的物体就会被移开。根据WPF，ElasticEase是这样工作的：但这正是我想要的(也许会更顺畅一些)：这是我目前的动画： <Storyboard RepeatBehavior="1x"

浏览 5提问于2015-12-21得票数 1

回答已采纳

2回答

如何在角度6中创建抖动动画？

、

如何使用角度6动画创建抖动动画？动画应该像Animate.css中的“摇”动画

浏览 3提问于2018-10-20得票数 4

回答已采纳

2回答

脚本动画块iOS

、、

我正在尝试制作一系列全屏图像的动画。每个图像都将以不同的方式进行动画处理。我想将这些动画存储在数据库或plist中的某个地方，我只是不想让它们硬编码。动画将是非常简单的，对象内的图像将抖动或反弹或有什么。我将使用块对对象进行动画处理，理想情况下，我希望将各个块存储在数据存储中。我希望避免使用单独的脚本语言或类似的语言。我最好的行动方案是什么？

浏览 1提问于2012-05-08得票数 3

回答已采纳

3回答