其他分享
首页 > 其他分享> > CSS的动画属性有哪些？

CSS的动画属性有哪些？

作者：互联网

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript

首先要想形成动画效果必须要制定关键帧 @keyframes。
关键帧的定义：
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}
制定了关键帧，必须要用animation属性调用

那么动画有哪些属性呢？跟着我来看看吧！

1、animation-name

1、设置对象所应用的动画名称，就是关键帧的名称
2、必须与规则@keyframes配合使用，例：@keyframes mymove{} animation-name:mymove;

2、animation-duration

设置对象动画的持续时间
说明：animation-duration:3s; 动画完成使用的时间为3s

3、animation-timing-function

设置对象动画的过渡类型
属性值：

  1. linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  2. ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  3. ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  4. ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  5. ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  6. step-start:马上跳到动画每一结束桢的状态

4、animation-delay

设置对象动画延迟的时间
说明：animation-delay:1s; 动画开始前延迟的时间为1s

5、animation-direction

设置对象动画在循环中是否反向运动
属性值：

  1. normal：正常方向
  2. reverse：反方向运行
  3. alternate：动画先正常运行再反方向运行，并持续交替运行
  4. alternate-reverse：动画先反运行再正方向运行，并持续交替运行

6、animation-play-state

设置对象动画的状态
属性值：

  1. animation-play-state:running 运动
  2. animation-play-state：paused 暂停

7、animation-iteration-count

设置对象动画的循环次数
属性值：

  1. animation-iteration-count：infinite 无限循环
  2. animation-iteration-count number 加上循环的次数，动画就会循环几次

为了便于大家理解，我做了一个小demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .circle {
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            left: 0;
            top: 300px;
            border-radius: 100%;
            animation: move 5s 1s linear infinite alternate;
            animation: move 5s linear infinite alternate; 
            animation: move 5s ease infinite alternate;
            animation: move 5s ease-in infinite alternate;
            animation: move 5s ease-out infinite alternate;
            animation: move 5s ease-in-out infinite alternate;
            animation: move 5s step-start infinite alternate;

        }

        .circle:hover {
            animation-play-state: paused;
        }

        @keyframes move {
            0% {
                left: 0;
                background: pink;

            }

            20% {
                left: 200px;
                background: red;
            }

            40% {
                left: 400px;
                background: yellow;
            }

            60% {
                left: 600px;
                background: green;
            }

            80% {
                left: 800px;
                background: blue;
            }

            100% {
                left: 1000px;
                background: purple;
            }

            0% {
                left: 0;
                background: pink;
            }
        }
    </style>
</head>

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

</html>

可以动手去试一试哦！

.卡文迪许 发布了2 篇原创文章 · 获赞 0 · 访问量 64 私信 关注

标签：动画,alternate,ease,move,animation,background,CSS,属性
来源： https://blog.csdn.net/weixin_42207972/article/details/104566469