CSS3动画属性，这么简单

最新推荐文章于 2024-10-02 07:15:00 发布

浪漫主义码农

最新推荐文章于 2024-10-02 07:15:00 发布

阅读量271

点赞数 1

分类专栏： CSS 文章标签：动画 css3 前端 html5

本文链接：https://blog.csdn.net/mq_sir/article/details/121192914

版权

CSS 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

CSS3动画属性

简单来说：动画就是把一帧一帧的画面连接起来。，以一定的速度连续播放时，视觉差看不出来，这就是动画。

知道了动画的概念，那就明白了怎么去实现，我们就要把每一帧的画面长什么样子画出来，然后以一定的速度连接起来就行了。

🤣那么有人就会问和过渡有什么区别呢？

区别在于：

transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何，事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。
过渡只有两帧，开始和结束，其余都是靠补间动画实现的。而动画可以设置任意多帧。

动画的使用

@keyframes规则

@keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从开始样式、经过中间的帧数样式、到最后的样式。

要使动画生效，必须将动画绑定到某个元素。使用关键词 “from” 和 “to”，等同于 0% 和 100%。

定义一个动画，

@keyframes 动画名称 {
    0% {
        //样式
        width: 200px;
    }
    50%{
         width: 300px;
    }
    100% {
        width: 200px;
    }
}
div { 
animation: 动画名称 5s;  //将该动画使用到div上，动画时长5s
}

动画属性

💠 animation-name ：规定 @keyframes 动画的名称。
💠animation-duration ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
💠 animation-delay ：规定动画何时开始，也可以说是延迟开始。默认是 0。
💠animation-iteration-count ：规定动画被播放的次数。默认是 1。
💠 animation-direction ：指定是向前播放、向后播放还是交替播放动画。默认是 “normal”。
- 🔘 normal - 动画正常播放（向前）。默认值
- 🔘reverse - 动画以反方向播放（向后）
- 🔘alternate - 动画先向前播放，然后向后
- 🔘alternate-reverse - 动画先向后播放，然后向前
💠 animation-timing-function ：规定动画的速度曲线。默认是 “ease”。

-🔘 cubic-bezier(n, n, n, n) ：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- 🔘 ease : 前面慢，中间快，后面慢
- 🔘linear :匀速运动
- 🔘 ease-in ：慢速开始
- 🔘 ease-out ：慢速结束
- 🔘 ease-in-out ：以慢速开始和结束的过渡效果
💠animation-fill-mode ：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- 🔘 none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- 🔘forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
- 🔘 backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
- 🔘 both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
animation-play-state ：规定动画是否正在运行或暂停。默认是 “running”。
💠 animation ：前面所有的属性的合写

动画的属性很多，但是我们常用的都是使用animation合写形式。动画能实现的东西很多很多。

实例

实现一个跑步的动画。随便从网上找一张连贯动作的图，我找的是这个，做到后面才发现图尽量找每一帧大小一样，动作幅度不是很多，帧数越多，分解的越多，动画的效果越好。

在这里插入图片描述

我们的实现思路就是，让一个动作看做一帧，一帧一帧的往方框移动，只要衔接的流畅，和你的图片帧数多，效果就很好。

在这里插入图片描述

效果：我把握的不是很好。

在这里插入图片描述

代码：

<body>
    <div class="main">
        <img src="./pace.png">
    </div>

</body>
<style>
    .main {
        width: 240px;
        height: 460px;
        border: 1px solid red;
        overflow: hidden;
        position: relative;
    }

    img {
        position: absolute;
        top: 0;
        animation: name 1.2s steps(10) infinite;
    }

    @keyframes name {
        from {
            left: 0;
        }
        to {
            left: -950px;
        }
    }
</style>