css3动画代码案例

CSS3动画是近年来网页设计中必不可少的元素之一，它可以为网页增加生动的效果和动感的交互。下面我们来看一个关于CSS3动画的代码案例。

/*定义动画*/
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
/*应用动画*/
.box {
width: 100px;
height: 100px;
background-color: #ff6347;
position: relative;
animation: bounce 2s infinite;
}

以上代码实现的是一个小方块的弹跳动画，分别由两个步骤组成。首先我们定义了一个名为“bounce”的动画，该动画由三个关键帧组成——0%、50%和100%。在第一帧时，方块以原本的位置开始，第二帧时移动到一个向上20像素的位置，最后一帧回到原位置，实现了一个类似弹跳的动画效果。

然后我们将这个动画应用到了一个类名为“box”的元素上。通过加入animation属性，我们指定了动画名称、动画时长以及播放次数。在这里，我们将播放次数设置为无限次，可以让这个方块一直弹跳下去。

CSS3动画代码案例就是这样，大家可以进行实际操作尝试一下，效果非常不错呢!

查看更多关于css3动画代码案例的详细内容...