让你的网页元素摇摆起来：使用CSS animation shake效果

发布时间：2023-05-12

一、什么是CSS animation shake效果

CSS animation shake效果是CSS3动画效果的一种，通过代码实现元素的抖动和摆动效果，为网页增添了动感和活力。 实现这种效果需要借助CSS3中的animation属性和关键帧（@keyframes）规则，使用相应的属性值设置元素的形态变化。其中animation属性有多个子属性，如animation-timing-function、animation-delay、animation-iteration-count等，可以实现不同的效果。

二、如何实现CSS animation shake效果

在CSS中使用CSS animation shake效果可以通过以下步骤实现： 1、定义一个需要应用CSS animation shake效果的元素，如下所示： <div class="animated-element"></div> 2、在CSS样式中，为这个元素添加animation属性，并设置animation-name、animation-duration等属性，如下所示： .animated-element { animation-name: shake; animation-duration: 1s; animation-delay: 0s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } 其中animation-name属性指定了元素要使用的动画名称，这里是shake；animation-duration属性指定了动画持续时间，这里是1秒；animation-delay属性指定了动画延迟时间，这里是0秒；animation-iteration-count属性指定了动画要执行的次数，这里是无限循环；animation-timing-function属性指定了动画的时间函数，这里是缓入缓出。 3、在样式中定义shake动画的关键帧，即元素的形态变化过程，如下所示： @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(0); } 75% { transform: translateX(8px); } 100% { transform: translateX(0); } } 其中@keyframes关键帧规则用于定义动画的关键帧，包括动画开始和结束时元素的形态。每个关键帧使用百分比表示动画执行的时间节点，0%表示动画开始时元素的形态，100%表示动画结束时元素的形态。在这个样式中，每个关键帧定义了元素在执行过程中的形态变化，通过在transform属性中设置translateX属性值来实现元素的横向平移。

三、如何调整CSS animation shake效果

通过调整CSS animation shake效果的不同属性值，可以实现不同的动画效果。下面是一些常见的调整方法： 1、调整animation-duration属性值，可以改变动画执行时间的长短。 2、调整animation-delay属性值，可以改变动画执行前的延迟时间。 3、调整animation-iteration-count属性值，可以改变动画执行的次数。 4、调整animation-timing-function属性值，可以改变动画的时间函数，如ease-in、ease-out、ease-in-out、linear等。 5、在@keyframes关键帧规则中调整关键帧的百分比值和transform属性值，可以改变元素的形态变化。

四、完整CSS animation shake效果示例代码

<!DOCTYPE html>
<html>
<head>
    <title>CSS animation shake效果示例代码</title>
    <style>
        .animated-element {
            width: 100px;
            height: 100px;
            background-color: #FF69B4;
            animation-name: shake;
            animation-duration: 1s;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }
        @keyframes shake {
            0% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-8px);
            }
            50% {
                transform: translateX(0);
            }
            75% {
                transform: translateX(8px);
            }
            100% {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div class="animated-element"></div>
</body>
</html>
推荐文章