CSS3动画属性总结

最新推荐文章于 2025-08-09 14:20:21 发布

.ASEN.

最新推荐文章于 2025-08-09 14:20:21 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML作业文章标签：动画 css3 css

本文链接：https://blog.csdn.net/weixin_47304332/article/details/125072498

HTML作业专栏收录该内容

8 篇文章

订阅专栏

本文介绍了CSS中的关键帧动画，并通过一个具体的例子展示了如何创建一个背景颜色从绿色渐变到紫色，并且元素位置从左到右平移的动画。动画的属性包括名称、持续时间、延迟、运动曲线、方向、填充模式和迭代次数。此外，当鼠标悬停在元素上时，动画暂停，体现了交互性。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*定义动画*/
    @keyframes move {
      from{
        background-color: #a5f5cd;
        transform: translate(0px);
      }
      to{
         background-color: #eab9d2;
        transform: translate(500px);
      }
    }


    /*盒子*/
    div{
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        /*动画名*/
        animation-name: move;
        /*动画持续时间*/
        animation-duration: 2s;
        /*开始延迟时间*/
        animation-delay: .5s;
        /*动画运动轨迹 ease缓慢 linear匀速 */
        animation-timing-function: ease;
        /*运动的方向 reverse 反向 normal正常 alternate奇次正常，偶次反向 alternate-reverse 偶次正常，奇次反向*/
        animation-direction: alternate;
        /*保留动画格式 forwards保留最后一帧的格式 backwoards保留原格式 both 保留第一帧和最后一帧*/
        animation-fill-mode: both;
        /*动画执行的次数 infinte 无限次 */
        animation-iteration-count: infinite;

    }

    div:hover{
        /*动画状态  paused暂停  runing正常*/
      animation-play-state: paused;
    }

  </style>
</head>
<body>
  <div></div>
</body>
</html>