动画

动画

动画是使元素从一种样式逐渐变化另一种样式的效果

你可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%

0%是动画的开始,100%是动画的完成.

@keyframes创建动画

使用@keyframes规则,你可以创建动画

@keyframes name{
    from|0% {
        css样式
    }
    percent{
        css样式
    }
    to|100%{
        css样式
    }
}

name:动画名称,开发人员自己命名;

percent:为百分比值,可以添加多个百分比值.

animation执行动画

animation: name duration timing-function delay iteration-count direction;
描述
name 设置动画的名称
duration 设置动画的持续时间
timing-function 设置动画效果的速率(如下)
delay 设置动画的开始时间(延时执行)
iteration-count 设置动画循环的次数,infinite为无限次数的循环
direction 设置动画播放的方向(如下)
animation-play-state 控制动画的播放状态:running代表播放,而paused代表停止播放
timing-function值 描述
ease 逐渐变慢(默认)
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
direction值 描述
normal 默认值为normal表示向前播放
alternate 动画播放在第偶数次向前播放,第奇数次向反方向播放
  <style>
        .animation{
            width: 300px;
            height: 300px;
            background-color: red;
            animation:anima 5S linear 5s infinite ;
        }
        .animation:hover{
            animation-play-state: running;
        }
        @keyframes anima {
            0%{
                background-color: red;
            }
            50%{
                background-color: green;
            }
            100%{
                background-color: blueviolet;
            }
        }
    </style>

<body>
    <div class="animation"></div>
</body>
posted @ 2023-03-25 21:25  土著古  阅读(77)  评论(0编辑  收藏  举报