CSS3 新增之动画

最新推荐文章于 2024-03-12 20:14:58 发布

linsir 一啵叶

最新推荐文章于 2024-03-12 20:14:58 发布

阅读量145

点赞数 1

文章标签： css3 动画前端 css

本文链接：https://blog.csdn.net/qq_53165476/article/details/131071276

版权

本文介绍了CSS动画的基础使用，包括定义关键帧、应用动画的属性如animation-name、animation-duration和animation-delay。还讨论了其他动画属性，如timing-function、iteration-count、direction和fill-mode，以及如何通过复合属性设置动画。此外，文章对比了动画与过渡的区别，并提供了实际示例，如让元素平滑移动的过渡和关键帧动画，以及自行车手骑行的动画案例。

摘要由CSDN通过智能技术生成

1、动画的基本使用

1）第一步：定义关键帧（定义动画）

简单方式定义：

完整方式定义：

2）第二步：给元素应用动画，用到的属性如下：

1.animation-name:给元素指定具体的动画(具体的关键)
2.animation-duration:设置动画所需时间
3. animation-delay : 设置动画延迟

2、动画的其他属性

1）animation-timing-function，设置动画的类型，常用值如下:

2）animation-iteration-count，指定动画的播放次数，常用值如下:

3）animation-direction，指定动画方向，常用值如下:

4）animation-fill-mode ，设置动画之外的状态:

5）animation-play-state ，设置动画的播放状态，常用值如下:

3、动画复合属性

只设置一个时间表示 duration，设置两个时间分别是: duration 和 delay

其他属性没有数量和顺序要求

4、动画与过渡的区别

1）动画不需要任何触发条件，过渡必须要有触发条件，（过渡可以往返）

2）动画可以通过关键帧在运动的过程中进行精细的设计，过渡只关注始末。

实例：

 <style>
    .outer {
      width: 1000px;
      height: 200px;
      border: 1px solid black;
    }

    .inner {
      width: 100px;
      height: 100px;
    }

    /* 过渡 实现inner1 跑到右边 */
    .inner1 {
      background-color: orange;
      transition: 3s linear;
    }

    .outer:hover .inner1 {
      transform: translate(900px);
    }

    /* 动画 实现inner2 跑到右边 */
    @keyframes linsir {
      0% {}
      50% {
        background-color: red;
        border-radius: 50%;
        box-shadow: 0px 0px 20px black;
      }
      100% {
        transform: translate(900px);
      }
    }

    .inner2 {
      background-color: skyblue;
      animation: linsir 3s linear forwards;
    }
  </style>

<body>
  <div class="outer">
    <div class="inner inner1">过渡</div>
    <div class="inner inner2">动画</div>
  </div>
</body>

5、动画案例（自行车手骑行画面）

  <style>
  div {
    width: 130px;
    height: 130px;
    background-image: url('../image/bike.png');
    margin: 0 auto;
    margin-top: 100px;
    animation: bike 1s steps(31) infinite;
  }
  @keyframes bike {
    from {}
    to {
      background-position: 0px -4030px;
    }
  }
  </style>
<body>
  <div class="outer">
    <div class="inner inner1">过渡</div>
    <div class="inner inner2">动画</div>
  </div>
</body>