CSS动画@-webkit-keyframes

最新推荐文章于 2025-05-08 11:30:00 发布

原创最新推荐文章于 2025-05-08 11:30:00 发布

· 1.4w 阅读

10 ·

版权

本文介绍了一个使用CSS动画的例子，展示了如何通过@-webkit-keyframes定义动画效果，包括背景颜色变化和位置移动，并设置了动画的持续时间、过渡方式及循环播放。通过:hover伪类激活动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@-webkit-keyframes：以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

display: inline-block;    行内块元素，不会产生错位

-webkit-animation-timing-function: linear;   线性过度

-webkit-animation-iteration-count: infinite;   设置循环播放次数：无限次

朋友的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1 {
            width: 200px;height: 200px;background-color: #ffc602;
            margin-top: 100px;
            display: inline-block;   

        }
        @-webkit-keyframes mycolor1{
            0%{
                background-color: #ffc602
            }
            20%{
                background-color: #1363bc;
                height:250px
            }
            40%{
                background-color: #cf0fff;
                height:300px
            }
            60%{
                background-color: #810977;
                height:350px
            }
            80%{
                background-color: #c91f10;
                height:400px
            }
            100%{
                background-color: #ffc602;
                height:450px
            }

        }
        .div1:hover{
            -webkit-animation-name: mycolor1;
            -webkit-animation-duration: 1s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
        }
        .div2{
            width: 200px;height: 200px;background-color: #ffc602;
            margin-top: 100px;
            display: inline-block;

        }
        @-webkit-keyframes mycolor{
            0%{
                background-color: #ffc602
            }
            20%{
                background-color: #1363bc;
                 -webkit-transform: translateY(-10px);
				 height: 210px;
            }
            40%{
                background-color: #cf0fff;
                 -webkit-transform: translateY(-20px);
				 height: 220px
            }
            60%{
                background-color: #810977;
                -webkit-transform: translateY(-30px);
				height: 230px
            }
            80%{
                background-color: #c91f10;
                 -webkit-transform: translateY(-40px);
				 height: 240px
            }
            100%{
                background-color: #ffc602;
                 -webkit-transform: translateY(-50px);
				 height: 250px
            }

        }
        .div2:hover{
            -webkit-animation-name: mycolor;
            -webkit-animation-duration: 1s;
	    -webkit-animation-timing-function: linear;  
            -webkit-animation-iteration-count: infinite;   
        }
        .div3{
            height: 40px;width: 40px;background-color: #08446d;
            display: inline-block;
        }
        .div3:hover{

        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>