CSS3 animation

最新推荐文章于 2022-05-05 12:46:11 发布

HiLanner

最新推荐文章于 2022-05-05 12:46:11 发布

阅读量504

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/HiLanner/article/details/51511439

css 专栏收录该内容

3 篇文章

订阅专栏

本文通过一个简单的示例介绍CSS3动画的基本用法，包括动画的关键帧定义、动画属性如animation-name、animation-duration等的详细解释。

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

css3 animate的小示例

先看一段代码~

<!DOCTYPE>
<html>
<head>
    <title>CSS3</title>
</head>
<style type="text/css">
.div{
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid #354789;
    overflow:hidden;
}
.ball{
    position: absolute;
    bottom: 20px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #444;
}
.ball:hover{
    animation: move 1.5s linear infinite alternate;
    -moz-animation:move 1.5s linear infinite alternate;
    -o-animation:move 1.5s linear infinite alternate;
    -webkit-animation: move 1.5s linear infinite alternate;
}
@keyframes move{
    0% {background: red;top:150px;opacity: 1.0}
    25% {background: yellow;top:100px;opacity: 0.8}
    50% {background: blue;top:50px;opacity: 0.6}
    75% {background: green;top:0px;opacity: 0.4}
    100% {background: red;top:150px;opacity: 1.0}
}
@-moz-keyframes move{
    0% {background: red;top:150px;opacity: 1.0}
    25% {background: yellow;top:100px;opacity: 0.8}
    50% {background: blue;top:50px;opacity: 0.6}
    75% {background: green;top:0px;opacity: 0.4}
    100% {background: red;top:150px;opacity: 1.0}
}
@-webkit-keyframes move{
    0% {background: red;top:150px;opacity: 1.0}
    25% {background: yellow;top:100px;opacity: 0.8}
    50% {background: blue;top:50px;opacity: 0.6}
    75% {background: green;top:0px;opacity: 0.4}
    100% {background: red;top:150px;opacity: 1.0}
}
@-o-keyframes move{
    0% {background: red;top:150px;opacity: 1.0}
    25% {background: yellow;top:100px;opacity: 0.8}
    50% {background: blue;top:50px;opacity: 0.6}
    75% {background: green;top:0px;opacity: 0.4}
    100% {background: red;top:150px;opacity: 1.0}
}
</style>
<body>
<div class="div">
    <div class="ball">

    </div>
</div>
</body>
</html>

运行结果就是一个小圆匀速向上运动背景色和透明度都在变化
如下图
初始状态
中间状态

现在我们来详细介绍每个属性的意思

###animation 属性是一个简写属性，用于设置六个动画属性：

animation-name //动画名称,规定需要绑定到选择器的 keyframe 名称。
animation-duration //请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
animation-timing-function //规定动画的速度曲线。