CSS3之animation属性

最新推荐文章于 2024-06-26 10:08:50 发布

迷失的风景web

最新推荐文章于 2024-06-26 10:08:50 发布

阅读量714

点赞数

本文链接：https://blog.csdn.net/qq_44193048/article/details/105766899

版权

animation 属性是一个简写属性，用于设置动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction（转载w3c）；
animation定义和用法
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]
(转载css3手册)
1.keyframe
在介绍animation具体使用之前，要先介绍keyframe。在CSS3中，把@keyframes称为关键帧。

@keyframes moveHover {
            0% {
                background: #cd4a48;
            }

            50% {
                background: #A48992;
            }

            100% {
                background: green;
            }
        }

关键帧的编写顺序没有要求，最后只会根据百分比按由小到大的顺序触发。
2.animation-name 动画名称

.box1 {
            width: 100px;
            height: 100px;
            background-color: #cd4a48;
            animation: box1hover 2s;
            /* 这里的box1hover 动画名称 */
        }
@keyframes box1hover {
            0% {
                background: #cd4a48;
            }

            50% {
                background: #A48992;
            }

            100% {
                background: green;
            }
        }

3.animation-duration 动画指定需要多少秒或毫秒完成,默认值为 0，意味着没有动画效果.

<!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>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #cd4a48;
            animation: box1hover 2s;
        }

        @keyframes box1hover {
            0% {
                background: #cd4a48;
            }

            50% {
                background: #A48992;
            }

            100% {
                background: green;
            }
        }
    </style>
</head>

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

</html>

3.animation-timing-function 设置动画如何完成一个周期
值：linear 匀速
ease 先慢后快，结束前变慢默认
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

.box1 {
            width: 100px;
            height: 100px;
            background-color: #cd4a48;
            animation: box1hover 2s linear;
            /* 这里的linear设置动画如何完成一个周期 */
        }

        @keyframes box1hover {
            0% {
                background: #cd4a48;
            }

            50% {
                background: #A48992;
            }

            100% {
                background: green;
            }
        }

4.animation-delay 动画在启动前的延迟间隔
值：time 默认值为 0

.box1 {
            width: 100px;
            height: 100px;
            background-color: #cd4a48;
            animation: box1hover 2s linear 2s ;
            /* 这里的第二个2s 动画在启动前的延迟间隔 */
        }

        @keyframes box1hover  {
            0% {
                background: #cd4a48;
            }

            50% {
                background: #A48992;
            }

            100% {
                background: green;
            }
        }

5.animation-iteration-count 动画的播放次数
值：n 一个数字，定义播放多少次动画默认值1
infinite 动画无限次播放

.box1 {
            width: 100px;
            height: 100px;
            background-color: #cd4a48;
            animation: box1hover 2s linear 2s infinite ;
            /* 这里的infinite动画的播放次数 */
        }

        @keyframes box1hover  {
            0% {
                background: #cd4a48;
            }

            50% {
                background: #A48992;
            }

            100% {
                background: green;
            }
        }

6.animation-direction 是否轮流反向播放动画
值：normal 正常
reverse 反向播放
alternate 在奇数次正向播放，在偶数次反向播放
alternate-reverse 与上面相反

.box1 {
            width: 100px;
            height: 100px;
            background-color: #cd4a48;
            animation: box1hover 2s linear 2s infinite reverse;
            /* 这里的reverse是否轮流反向播放动画 */
        }

        @keyframes box1hover  {
            0% {
                background: #cd4a48;
            }

            50% {
                background: #A48992;
            }

            100% {
                background: green;
            }
        }