尝试在卡片之间添加向上/向下滑动动画(颤动)

要在卡片之间添加向上或向下滑动的动画效果，可以使用CSS动画和JavaScript来实现。以下是一个简单的示例，展示了如何实现这种颤动效果。

基础概念

CSS动画：通过CSS的@keyframes规则定义动画序列，并使用animation属性将其应用到元素上。
JavaScript：用于控制动画的触发和执行。

类型

向上滑动：元素从当前位置向上移动一段距离，然后返回。
向下滑动：元素从当前位置向下移动一段距离，然后返回。

应用场景

导航菜单：在切换不同菜单项时添加滑动效果。
轮播图：在切换图片时添加滑动效果。
表单验证：在提交表单前进行动画提示。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Shake Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card" id="card1">Card 1</div>
    <div class="card" id="card2">Card 2</div>
    <button onclick="shakeCard('card1')">Shake Card 1</button>
    <button onclick="shakeCard('card2')">Shake Card 2</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.card {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.3s ease-in-out;
}

@keyframes shake-up {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    75% { transform: translateY(10px); }
}

@keyframes shake-down {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(10px); }
    75% { transform: translateY(-10px); }
}

JavaScript (script.js)

function shakeCard(cardId, direction = 'up') {
    const card = document.getElementById(cardId);
    let animationName;

    if (direction === 'up') {
        animationName = 'shake-up';
    } else if (direction === 'down') {
        animationName = 'shake-down';
    }

    card.style.animation = `${animationName} 0.5s`;
    setTimeout(() => {
        card.style.animation = '';
    }, 500);
}