CSS3动画属性 animation详解（看完就会）

2022-10-03 231

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS3动画属性 animation详解（看完就会）

keyframes

用 keyframes定义动画，写上动画要执行的内容，（类似类选择器）

@keyframes a {
            0% {
                width: 300px;
            }
            100% {
                width: 600px;
            }
        }

这就是定义了一个动画变量名，从0%到100%也就是从开始到结束，也可以用from，to来表示，

@keyframes a {
            from {
                width: 300px;
            }
            to {
                width: 600px;
            }
        }

里面写属性变化的值，不止可以分两个段也可以进行多段分割

@keyframes a {
            0% {
                width: 300px;
            }
            50% {
                width: 800px;
            }
            100% {
                width: 300px;
            }
        }

，用百分数进行分割。

动画相关的值

@keyframes 规定动画

animation-name 规定 @keyframes 动画的名称（必须的）

animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是 0（必须的）

animation-timingfunction 规定动画的速度曲线，默认是“ease”

animation-delay 规定动画何时开始，默认是 0

animation-iteration-count 规定动画被播放的次数，默认是 1，还有 infinite

animation-direction 规定动画是否在下一周期逆向播放，默认是 "normal", alternate 逆播放

animation-play-state 规定动画是否正在运行或暂停。默认是 "running", 还有 "paused"

animation 所有动画属性的简写属性，除了animation-play-state 属性

animation-name animation-duration

<style>
        @keyframes a {
            0% {
                width: 300px;
            }
            50% {
                width: 800px;
            }
            100% {
                width: 300px;
            }
        }
        div {
            animation-name: a;
            animation-duration: 2s;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div style='background-Color:red;width: 300px;height:300px ;'></div>
</body>

编辑

刷新之后就自动触发动画，执行的动画变量名是a，两秒内完成动画，也就是从0%到100%两秒内完成。

animation-timing-function animation-delay

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

@keyframes a {
            0% {
                width: 300px;
            }
            50% {
                width: 800px;
            }
            100% {
                width: 300px;
            }
        }
        div {
            animation-name: a;
            animation-duration: 5s;
            animation-timing-function: ease-in-out;
            animation-delay: 2s;
        }

编辑

animation-timing-function 动画开始和结束慢速

animation-delay 动画延迟两秒开始。

animation-iteration-count animation-play-state

@keyframes a {
            0% {
                width: 300px;
            }
            50% {
                width: 800px;
            }
            100% {
                width: 300px;
            }
        }
        div {
            animation-name: a;
            animation-duration: 5s;
            animation-timing-function: ease-in-out;
            animation-delay: 2s;
            animation-iteration-count: infinite;
        }
        div:hover {
            animation-play-state: paused;
        }

编辑

animation-iteration-count 循环次数，infinite重复循环

animation-play-state paused 停止动画当鼠标移入动画停止

animation-direction animation-fill-mode

animation-direction

normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

@keyframes a {
            0% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 800px;
            }
        }
        div {
            animation-name: a;
            animation-duration: 5s;
            animation-timing-function: ease-in-out;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            /* animation-fill-mode: forwards; */
            animation-direction: alternate;
        }
        div:hover {
            animation-play-state: paused;
        }

编辑

animation-iteration-count：infinite 重复循环 animation-direction：alternate 在偶数次反向播放

就形成了长度一直来回变化的效果

animation-fill-mode

保持最终状态 forwards 原位置 backwards

@keyframes a {
            0% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 800px;
            }
        }
        div {
            animation-name: a;
            animation-duration: 5s;
            animation-timing-function: ease-in-out;
            animation-delay: 2s;
            animation-fill-mode: forwards;
        }
        div:hover {
            animation-play-state: paused;
        }

编辑

animation-fill-mode: forwards 宽度到达800后停止动画保持在动画执行完毕的状态不会恢复

animation

直接写出所有的相关动画属性（简写），除了animation-play-state 属性。

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态。

@keyframes a {
            0% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 800px;
            }
        }
        div {
            animation: a 5s ease-in-out 2s infinite alternate;
        }
        div:hover {
            animation-play-state: paused;
        }