石家庄人才网今天给大家分享《css动画效果代码案例》，石家庄人才网小编对内容进行了深度展开编辑，希望通过本文能为您带来解惑。

CSS动画效果可以通过@keyframes规则来实现，@keyframes规则中定义了动画的每一帧要执行的操作。您可以指定动画的名称、持续时间、动画函数、延迟时间、播放次数以及动画的方向等属性。

以下是一些常用的CSS动画效果代码案例：

1. 移动动画

```css@keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); }}

.box { width: 100px; height: 100px; background-color: red; animation: move 2s linear infinite;}```

这段代码定义了一个名为“move”的动画，动画持续时间为2秒，动画函数为linear，动画执行无限次。动画的效果是将一个红色的方块从左侧移动到右侧，然后再回到左侧，不断循环。

2. 旋转动画

```css@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}

.box { width: 100px; height: 100px; background-color: red; animation: rotate 2s linear infinite;}```

这段代码定义了一个名为“rotate”的动画，动画持续时间为2秒，动画函数为linear，动画执行无限次。动画的效果是将一个红色的方块绕着中心点旋转360度，然后再回到初始位置，不断循环。

3. 缩放动画

```css@keyframes scale { from { transform: scale(1); } to { transform: scale(2); }}

.box { width: 100px; height: 100px; background-color: red; animation: scale 2s linear infinite;}```

这段代码定义了一个名为“scale”的动画，动画持续时间为2秒，动画函数为linear，动画执行无限次。动画的效果是将一个红色的方块从原始大小放大到2倍，然后再缩小到原始大小，不断循环。石家庄人才网小编提醒大家，以上只是一些简单的CSS动画效果代码案例，您可以根据自己的需要修改代码，创建出更加炫酷的动画效果。

有关《css动画效果代码案例》的内容介绍到这里，想要了解更多相关内容记得收藏关注本站。