css动画持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情大家好,我是大

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

大家好,我是大帅子,今天给大家讲一下一些css动画的基础,在讲一下简单的动画,剩下的就可以交给大家自己发挥,好了,那接下来我们直接开始吧

1.一个简单的动画

首先我们可以先尝试写一个简单的动画,

讲一下我们需要的
一个盒子,只一个盒子,我们就可以实现一个简单的动画

1. 那我们先来一个盒子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

2.紧接着我们开始定义动画

我们需要定义一个动画的名字, 动画的名字可以随便取,因为动画的的英文叫做animation, 所以我这边这边直接取这个, from 里面就是动画的起始状态可以省略, to就是动画的结束状态,这个就不能省略了

@keyframes animation {
      from{}
      to{}
    }

3.这个时候我们可以用 `transform` ,使动画发生位移

to{
     transform: translate(100px, 0);
     background-color: green;
     border-radius: 50px;
}

4.最后一步,使用动画

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: pink;
      
      animation: key 2s;
    }

    @keyframes key {
      from {
        transform: translate(0, 0);
      }

      to {
        transform: translate(100px, 0);
        background-color: green;
        border-radius: 50px;
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

5. 最后在跟大家说一下动画的属性


@keyframes —— 规定动画；
animation-name —— 动画名称；
animation-timing-function —— 速度曲线 — — 默认：ease、匀速：linear、间隔步长：steps（n）,可制作打字机、动图效果;
animation-duration —— 动画一个周期花费时间；
animation-delay —— 动画何时开始 — — 默认：0s；
animation-iteration-count —— 动画播放次数 — — 默认：1次、无限次：infinite；
animation-direction —— 动画下一周期播放方向 — — 默认：normal、逆播放：alternate；
animation-play-state —— 规定动画运行或停止 — — 默认：running、暂停：paused，通常与hover共用；
animation-fill-mode —— 动画结束后状态 — — 默认：backwards、停此处：forwards。

最后大家可以自己发挥一下自己的想象, 冲吧!

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅 还需努力!大家一起进步!!!

css动画