CSS animation 属性

最新推荐文章于 2024-08-15 09:57:13 发布

Jsy_997

最新推荐文章于 2024-08-15 09:57:13 发布

阅读量1.3w

点赞数 7

分类专栏： htmlcss 文章标签： css3 html5

本文链接：https://blog.csdn.net/Jsy_997/article/details/124099604

版权

htmlcss 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS的animation属性，包括animation-name、duration、timing-function、delay、iteration-count和direction等参数的使用。通过实例展示了如何创建关键帧动画，控制元素的动态变化，如改变宽度等。此外，还解释了不同timing-function值对动画速度曲线的影响，并提供了实际代码示例来演示一个气球移动的动画效果。

摘要由CSDN通过智能技术生成

这是一个有点类似于前面学的transition的属性。这个属性用于制作关键帧动画。3

1.animation属性也是一个简写属性，用于设置六个动画属性。

用法：animation: name duration timing-function delay iteration-count direction;

这六个属性值分别为：

animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

2.animation-name

绑定到选择器的keyframe名称。使用方法：changeTips就是我自定义的名字。也就是animation里面的name的值。

@keyframes changeTips {
    0%{
        width: 38px;
    }
    50%{
        width: 52px;
    }
    100%{
        width: 66px;
    }
}

3. animation-duration，animation-delay

这两个分别表示我们定义的这个关键帧动画的持续时间，以及开始时的延迟时间。都是以秒或者毫秒计时。

4. animation-timing-function

这个也是用于定义函数变化速度曲线的。

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

5. animation-iteration-count，animation-derection

这两个属性分别表示关键帧动画的播放次数和是否应该反向轮流播放动画。

n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。
alternate	动画应该轮流反向播放。
normal	默认值。动画应该正常播放。

其实该属性我觉得可以这么理解，就是写了一个视频或者一个小片段，就像以前的电影一样。我们写了一张一张的图，然后通过加animation-name，开始流畅起来。然后通过加animation-timing-function给一个“快进”、“0.5倍数播放”等等，然后再给一个animation-count定义这个片段需要播放几次。通过animation-direction定义可不可以倒着播放。

最后附上一个自己的小练习。图片大家自己找一个替代一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        root{
            background-image: linear-gradient(rgb(80, 80, 248),#FFF);
            position: relative;
        }
        @keyframes moveBalloon {
            0%{
                position: absolute;
                top: 0;
                left: 0;
                transform: rotateZ(0deg);
            }
            25%{
                position: absolute;
                top: 500px;
                left: 50%;
                transform: rotateZ(30deg);
            }
            50%{
                position: absolute;
                top: 0;
                left: 1379px;
                transform: rotateZ(0deg);
            }
            75%{
                position: absolute;
                top: 500px;
                left: 50%;
                transform: rotateZ(-30deg);
            }
            100%{
                position: absolute;
                top: 0;
                left: 0;
                transform: rotateZ(0deg);
            }
        }
        .root img{
            animation: moveBalloon 6s linear .5s infinite normal;
        }


    </style>
</head>
<body>

    <div class="root">
        <img src="./img/balloon.png" alt="">
    </div>

</body>
</html>