[分享]css两个动画效果

CSS动画效果是在网页设计中极为常见的一种交互形式，它可以为网页带来生机和动感。今天我们来讨论一下关于CSS两个动画效果的实现。/ 代码1：实现弹跳动画效果 / .bouncinganimation ...

CSS动画效果是在网页设计中极为常见的一种交互形式，它可以为网页带来生机和动感。今天我们来讨论一下关于CSS两个动画效果的实现。

/* 代码1：实现弹跳动画效果 */
.bouncing-animation {
    animation-name: bouncing;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes bouncing {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 代码2：实现闪烁动画效果 */
.blinking-animation {
    animation-name: blinking;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes blinking {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
} 

首先是实现弹跳动画效果的代码，这里使用了CSS3关键帧动画的方式来实现。我们定义了一个名为“bouncing”的动画，在1秒钟内不断地循环播放。同样地，我们使用了ease-in-out的时间函数，让动画在开始和结束时慢下来，中间部分加速。在关键帧中，我们设置了三个阶段，分别为初始状态、中间状态和最终状态。初始状态和最终状态的transform属性值均为translateY(0)，也就是说元素不发生移动；而在中间状态，我们将元素向上移动了10像素，从而实现了“弹起”的效果。

接下来是实现闪烁动画效果的代码。这里我们同样使用了CSS3关键帧动画的方式。我们定义了一个名为“blinking”的动画，在1秒钟内不断地循环播放。与弹跳动画不同的是，我们没有指定时间函数，也就是说动画的速度保持不变。在关键帧中，我们设置了两个状态，从不透明到透明的过渡。当opacity属性值为1时，元素完全不透明；而当opacity属性值为0时，元素完全透明。这样，就实现了“闪烁”的效果。