CSS动画的基本代码与案例

最新推荐文章于 2024-04-28 17:27:49 发布

凌叁儿

最新推荐文章于 2024-04-28 17:27:49 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/lingsaner/article/details/131125182

版权

前端基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

动画

动画

过渡：实现两个状态间的变化过程
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画实现步骤

定义动画

/* 方式一 */
@keyframes 动画名称 {
  from {}
  to {}
}

/* 方式二 */
@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}

使用动画

animation: 动画名称 动画花费时长;

在这里插入图片描述

animation复合属性

提示：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

animation拆分写法

在这里插入图片描述

二、使用案例

代码

代码如下（示例）：

    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;

        animation: change 1s infinite alternate;
      }

      @keyframes change {
        0% {
          transform: translate(0);
        }

        100% {
          transform: translate(600px);
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>