CSS动画知识总结

328 阅读1分钟

本篇博客是作为个人自学记录,如有不足之处,请批评指正。

动画的原理

许多禁止的画面(帧)以一定速度(如:每秒30帧)连续播放时,肉眼因视觉残像产生错觉,而误以为是活动的画面。

CSS 动画的两种做法

比如我现在要把一个盒子从左往右移动100px,那么我应该在呢么做呢?

transition

使用transition里的translateX来移动,然后加上transition的过渡效果

这里使用鼠标悬停在红色方块上,方块就向右移动100px。

直接上代码!

<!DOCTYPE html>
<html lang="zh-CN">

<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: red;
      transition: all 1s;
    }

    #box:hover {
      transform: translateX(100px);
    }
  </style>
</head>

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

</html>

MDN上有很详细的资料,动画主要还是动手。

animation

使用animation,首先要先声明关键帧,然后添加动画属性到元素上。

@keyframess语法

一种写法是from to,一种写法是百分数,下面我使用百分数写法。

animation语法

缩写语法:

animation:时长丨过渡方式丨延迟丨次数丨方向丨填充方式丨是否停留丨动画名;

  • 时长:s 或者 ms

  • 过渡方式:跟transform取值一样。

  • 次数:协商重复次数,或者infinite(无限重复)

  • 方向:reverse丨alternate丨alternate-reverse

  • 填充方式:none丨forwards(停留在最后一帧)丨backwards丨both

  • 是否暂停:paused丨running

上代码!

<!DOCTYPE html>
<html lang="zh-CN">

<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: red;
      animation: box 1s forwards;
    }

    @keyframes box {
      0% {
        transform: translateX(none);
      }

      100% {
        transform: translateX(100px);
      }
    }
  </style>
</head>

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

</html>

总结

动画最主要的还是查看文档动手做,花太多时间记并没有动手实践几遍来得实在