keyframes动画

最新推荐文章于 2024-05-13 14:34:46 发布

滴滴咚咚咚

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量213

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/darkCloudss/article/details/109329508

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
</head>

<style>
    @keyframes mytest{
        from{background-color: yellowgreen}
        to{background-color: skyblue}
    }

    div{
    	position:relative;
        background-color: yellowgreen;
        height: 100px;
        width: 100px;
        animation: mytest 3s linear 1s infinite alternate running;
    }

</style>
<body>

<div>

</div>

</body>
</html>

animation:规定 @keyframes 动画的名称
规定动画完成一个周期所花费的秒或毫秒。默认是 0
规定动画的速度曲线。默认是 “ease”
规定动画何时开始。默认是 0
规定动画被播放的次数。默认是 1
规定动画是否在下一周期逆向地播放。默认是 “normal”
规定对象动画时间之外的状态

也可以

@keyframes mytest{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}