CSS基础-30CSS动画-动画_css30options-优快云博客

本文通过一个具体的实例演示了如何使用CSS实现动画效果。该动画包括颜色变化及位置移动，并且设置了动画周期为5秒，无限循环播放。适用于网页设计中增加视觉效果。

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

<!DOCTYPE html>
<!--CSS动画-动画-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="css09.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>动画效果。。。。。。</div>

</body>
</html>
css:
div {
    width: 100px;
    height: 100px;
    background-color: #b3d4fc;
    /*使用相对布局*/
    position: relative;
    /*动画名称anim 时间5s*/
    /*infinite alternate反复执行*/
    animation: anim 5s infinite alternate;
    /*支持 chrome safari浏览器*/
    /*infinite alternate反复执行*/
    -webkit-animation: anim 5s infinite alternate;
}

@keyframes anim {
    0% {
        background-color: #ffff00;
        left: 0px;
        top: 0px
    }
    25% {
        background-color: aqua;
        left: 100px;
        top: 0px
    }
    75% {
        background-color: blueviolet;
        left: 200px;
        top: 0px
    }
    100% {
        background-color: brown;
        left: 300px;
        top: 0px
    }

}

/*支持 chrome safari浏览器*/
@-webkit-keyframes anim {
    0% {
        background-color: #ffff00;
        left: 0px;
        top: 0px
    }
    25% {
        background-color: aqua;
        left: 100px;
        top: 0px
    }
    75% {
        background-color: blueviolet;
        left: 200px;
        top: 0px
    }
    100% {
        background-color: brown;
        left: 300px;
        top: 0px
    }

}