每天进步一点点2021.11.1 -- css3动画

本文链接：https://blog.csdn.net/tuzi007a/article/details/121086181

CSS3动画

animation

animation动画的七大属性

animation-name 动画名称，必须
animation-duration 动画持续时间，也就是从开始到结束完成一轮所用的时间默认是0
animation-timing-function 动画的运动形式。有三个值
- ease 默认。低速起步，高速执行，低速结束
- linear 从开始到结束都匀速执行
- steps(n, state)
animation-delay 动画延迟多长时间执行。默认为0，也就是不延迟，直接开始执行动画
animation-fill-mode 动画填充模式，规定动画执行结束后是否显示。有3个主要值
- none 默认。对原动画不做任何影响，即动画结束后返回初始位置
- forwards 当动画结束时，让动画停留在最后一帧。比如让盒子运动到最右边的位置，当设置forwards后，动画运动到最后边后，就停留在了最右边，而不是返回到初始位置。
- backwards 动画播放结束后返回推迟后的第一帧动画
animation-iteration-count 定义动画播放的次数。默认1，即动画默认只播放1次。
animation-direction 动画播放方向有两个值
- normal 默认值，按照正常约定的方向播放动画。
- alternate 反向播放动画

animation写法

可以分开单独写属性和值

// 让盒子按照moveName动画执行，整个过程耗时3s，动画结束后停留在最后一帧。
.box {
	animation-name: moveName;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

也可以合并写

.box {
	animation: moveName 3s forwards;
}

animation应用演示

@keyframes large {
	from {width: 100px}
	to {width: 300px}
}

// or:

@keyframes large {
	0% {width: 100px}
	100% {width: 300px}
}

// 实现

.box {
	animation-name: large; // 动画名称
	animation-duration: 2s; // 动画持续时间，也就是从开始到结束完成一轮所用的时间 默认是0
	animation-timing-function: linear; // 动画的运动形式， 
	animation-fill-mode: forwards;
}

// or

.box {
	animation: large 2s linear forwards;
}

transform

2D属性

translate(x,y) 沿着x ， y轴移动
translateX(x) 沿着x轴移动
translateY(y) 沿着y轴移动
scale(x, y) 沿着x ， y轴缩放
scaleX(x) 沿着x轴缩放
scale(y) 沿着y轴缩放
rotate(angle) 顺时针旋转角度，单位deg
skew(x, y) 倾斜角度

3D属性

translate3d(x, y , z) 3d移动
scale3d(x, y, z) 3d缩放
rotate3d(x,y,z,angle) 3d旋转
perspective(n) 3d透视

举个例子

一张图片，从左向右移动，并停在结束位置。

用animation处理

<!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>showToast</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    @keyframes move {
      from {margin-left: 0;}
      to {margin-left: 300px;}
    }
    img {
      width: 100px;
      animation: move 3s forwards;
    }
    
  </style>
</head>
<body>
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F12%2F20200112001854_hdmVQ.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638362583&t=33daad2d8c1af01804d87c40aa9480db" alt="">
</body>
</html>

用transform处理

<!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>showToast</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    img {
      width: 100px;
      transform: translateX(300px);
    }
    
  </style>
</head>
<body>
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F12%2F20200112001854_hdmVQ.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638362583&t=33daad2d8c1af01804d87c40aa9480db" alt="">

</body>
</html>

用JS动画处理

<!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>showToast</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    img {
      position: absolute;
      width: 100px;
    }
    
  </style>
</head>
<body>
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F12%2F20200112001854_hdmVQ.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638362583&t=33daad2d8c1af01804d87c40aa9480db" alt="">
  <script>
    var img = document.querySelector('img');
    animate(img, 0, 300, 'px');
    function animate(obj, start, end, unit, cb) {
      var step = (end - start) / 10;
      var n = 1;
      clearInterval(timer);
      function move() {
        obj.style.left = start + step * n + unit;
        if(obj.style.left === end + unit) {
          clearInterval(timer);
          cb && cb();
        }
        n++;
      }
      var timer = setInterval(move, 30);
    }

  </script>
</body>
</html>