CSS-关键帧动画

原创

于 2023-02-24 21:07:14 发布 · 553 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画 #css3

本文介绍了CSS中的animation和transition的区别，强调animation在无需触发事件的情况下即可创建动画效果。详细阐述了animation的复合属性，包括动画名称、持续时间、过渡类型、延迟时间、循环次数和反向运动。此外，还提到了关键帧的概念，并提及了Animation.css动画库的应用。

animation和transition的区别
相同点：都是随时间改变元素的属性值
不同点：transition需要触发一个时间（hover或者click事件）才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也是可以显示的随时间变化来改变元素的css属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值

animation:mymove 20s ease-id-out 2s infinite alternate;
mymove  动画名称 
20s  动画持续时间
ease-in-out   动画过渡类型
2s   动画延迟的时间
infinite  动画的循环次数
 alternate  动画在循环中是否反向运动

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: mymove 2s linear;
        }

        @keyframes mymove {
            from {
                width: 100px;
                height: 100px;
                background-color: red;
            }

            to {
                width: 200px;
                height: 300px;
                background-color: rgb(0, 255, 115);
            }
        }

        @keyframes mymove {
            10% {
                width: 100px;
                height: 100px