当前位置：首页 > news >正文

css—动画

news 文章来源：https://blog.csdn.net/m0_64387122/article/details/144066216 2025/1/12 18:19:48

一、背景

本文章是用于解释上一篇文章中的问题，如果会动画的小伙伴就不用再次来看了，本文主要讲解一下动画的设定规则，以及如何在元素中添加动画，本文会大篇幅的讲解一下，动画属性。注意，这是css3的内容，默认认为已经了解了css的知识。

二、如何配置动画规则

关于如何定制动画规则，想必看过我的轮播图那篇文章的小伙伴们已经不陌生了，接下来我就简单的说一下如何去定制动画规则。

1、首先动画规则是通过@keyframes 动画名【注意动画名称任意，但是建议见名知意】。

2、在动画名称之后使用花括号来定义相关的规则，例如让盒子的宽高变化，或者是移动元素。

3、定制的阶段可以分为简单的写法，但是有缺点，只能设置开始和结束的状态。

4、另一种就是相对复杂的百分比写法，相对复杂，但是更灵活，建议使用百分比定制，但是还是要根据实际情况选择，这里不做限制。

1、简单写法

@keyframes animation {from{元素开始的状态}to{元素目标状态}
}

2、百分比

@keyframes animation {0%{状态一【开始状态】}25%{状态二}50%{状态三}75%{状态四}100%{状态五【目标状态】}
}

注意：当使用百分比写法的时候阶段是可以自由拆分的，同样也是根据具体情况具体定制。

三、相关属性介绍

关于属性方面我们先来说一下基本的一些属性，大家肯定有一个疑惑，动画规则有了，但是如何添加到元素上呢，那么接下来就来聊一聊如何去为元素添加动画规则。

1、基本属性使用

1、首先添加动画规则，需要使用animation-name来声明动画的名称，也就是动画规则中的名称。

2、那么动画一定是有时间的，所以接下来了就需要设定时间，时间是通过animation-duration来设定的，值的单位是秒【s】或者毫秒【ms】。

以上就是动画的基本使用，如果你只是想回忆一下自己学过的动画知识，那么想必看到这里已经想起来不少了，如果你是小白，那么继续阅读下去，相信会给你带来不菲的价值。

2、其他属性的使用

刚刚介绍完两个基本的属性，有了以上的两个属性，再加上动画规则，就可以做到一个简单的动画，但是我们的目的也一定不是简简单单的让元素动一下，那和过渡属性又有什么区别呢，那么接下来就一起来看一下，动画的其他有趣的属性。

1、animation-delay

这是一个延时属性，就像是他的字面意思，这个属性会让动画在开始的时候延长一段时间之后，再开始动画的播放，接下来演示一下。

 <body><div class="box"></div></body>

 <style>.box {width: 100px;height: 100px;background: orange;animation-name: moveR;animation-duration: 2s;animation-delay: 2s;}@keyframes moveR {0% {transform: translateX(0);}20% {transform: rotate(360deg);background: pink;}50% {background: blue;border-radius: 50%;}to {transform: translateX(1000px);background: red;}}</style>

效果展示：

延迟属性就说到这里。

2、animation-timing-function

这个属性是用来定义过渡形式的，用来固定元素的动画节奏。

选择器 {animation-timing-function:ease(慢快慢,默认值)linear(匀速)ease-in(先慢后快)ease-out(先快后慢)ease-in-out(慢快慢，相对于ease更慢一点)step-start(不考虑过渡时间直接就是终点)step-end(过渡时间到直接到终点)steps(数值)(步长，一段一段的过渡)cubic-bezier(.88,.54,.35,1.79)贝塞尔曲线

这个属性就不做演示喽，把这个机会留给大家，这个属性和transition中的过度形式是一样的。

3、animation-interation-count

这个属性是用来定义动画播放次数的，可以是1次，或者是多次，也有一些固定的属性，例如：infinite，这个属性值的意思就是动画会一直运动。具体使用可以看css—轮播图实现-CSDN博客文章浏览阅读636次，点赞6次，收藏18次。CSS样式来实现图片的切换效果。它不依赖于JavaScript，运行速度较快，并且具有较好的兼容性。https://blog.csdn.net/m0_64387122/article/details/144049330?spm=1001.2014.3001.5502这篇文章就使用到了这个属性，大家可以去看一下，也是可以学习到一些知识的。

4、 animation-direction

这个属性是用来定义动画的运动方向的

animation-direction: normal(左到右，默认值)/reverse(反向)/alternate(来回滚动)/alternate-reverse(反向来回滚动)

从左到右，和反向，也就是从右到左，就不进行演示了，还是比较好理解的，接下来就来演示一下来回滚动。

接下来我们来看一下代码：

<body><div class="box"></div></body>

<style>.box {width: 100px;height: 100px;background: orange;animation-name: moveR;animation-duration: 2s;animation-iteration-count: 3;animation-direction: alternate;}@keyframes moveR {0% {transform: translateX(0);}20% {transform: rotate(360deg);background: pink;}50% {background: blue;border-radius: 50%;}to {transform: translateX(1000px);background: red;}}</style>

其中的animation-direction: alternate;属性就是控制元素来回滚动的重要环节。

5、 animation-fill-mode

这个属性是用来定义动画以外的状态，也就是动画最后会停在那里？

结构：

animation-fill-mode: forwards(停止在最后一帧)/backforwards(停止在第一帧)

这里就不延时停在第一帧了，这是默认的。接下来我就来演示一下停止在最后一帧。效果如下：

<body><div class="box"></div></body>

<style>.box {width: 100px;height: 100px;background: orange;animation-name: moveR;animation-duration: 2s;animation-fill-mode: forwards;}@keyframes moveR {0% {transform: translateX(0);}20% {transform: rotate(360deg);background: pink;}50% {background: blue;border-radius: 50%;}to {transform: translateX(1000px);background: red;}}</style>

6、animation-play-state

这个属性是用来定义动画播放状态的。

结构：

animation-play-state: paused(暂停)/running(运行，默认值)

默认值是运行状态的，所以同样不做演示，只演示暂停的使用，搭配hover伪类可以实现交互的效果。效果如下：

<style>.box {width: 100px;height: 100px;background: orange;animation-name: moveR;animation-duration: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-fill-mode: forwards;}@keyframes moveR {0% {transform: translateX(0);}20% {transform: rotate(360deg);background: pink;}50% {background: blue;border-radius: 50%;}to {transform: translateX(1000px);background: red;}}.box:hover {animation-play-state: paused;}</style>

从效果中可以清楚的看到，当鼠标放在元素上时会静止元素的运动。

四、属性的符合写法

animation: moveR 2s 0.5s linear infinite alternate-reverse;

符合写法就是将之前介绍的属性进行合并使用，也是比较推荐的写法。这个就比较简单了，就不再重复解释了。

五、结语

感谢大家的耐心阅读，希望这篇文章能给您带来一些启发和帮助。如果您有任何疑问或建议，请随时在评论区留言，我会尽快回复，今天的分享就到这里了，如果您觉得这篇文章还不错，请点赞、分享给更多的朋友吧！同时，也欢迎关注我的博客，获取更多精彩内容。

一、背景

二、如何配置动画规则

1、简单写法

2、百分比

三、相关属性介绍

1、基本属性使用

2、其他属性的使用

1、animation-delay

2、animation-timing-function

3、animation-interation-count

4、 animation-direction

5、 animation-fill-mode

四、属性的符合写法

五、结语

相关文章：