动画...-CSDN博客

本文链接：https://blog.csdn.net/qq_59729459/article/details/129221349

速度曲线 linear匀速 steps（x）、、分布动画分成x部完成

多组动画符合用，隔开

无缝动画，走马灯 6张图用3个图片的宽度显示，那么在六张图后面再加前面3张

移动的方块 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    @keyframes move {
    0%{
        transform: translateX(500px);
    }
        25%{
            transform: translateX(500px) translateY(300px);
            background-color: yellow;
        }
        50%{
            transform: translateX(0px) translateY(300px);
            background-color: blueviolet;

        }
        75%{
            transform: translateX(0px) translateY(0px);
            background-color: pink;
        }
        100%{
            transform: translateX(0) translateY(0);
        }
    }
    .box{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        animation: move 5s infinite alternate;  /*无线播放 正则播放*/
    }
  </style>
</head>
<body>
 <div class="box"></div>
</body>
</html>

如果没有给高，图片不会显示出来，然后body给到了高还是没有显示，那么就应该去查看父元素，给父元素设置一个就好了

background-size: contain 等比例缩放

cover 覆盖 >>>>>>>>>>所以应该使用cover

大波浪动画》》》》》》》》》》》》》》

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      background-color: #222;
    }
    @keyframes move {
      0%{
        transform: translateZ(0px);
        background-color: #222;
      }
      100%{
        transform: translateZ( 200px);
        background-color: #fff;
      }

    }
    .fa{
      transform-style: preserve-3d;
      perspective: 1000px;
      background-color: #222;

      height: 400px;
      width: 400px;
      margin:  100px auto;


    }
    .son{
      float: left;
      height: 100px;
      width: 100px;
      background-color: black;
      transition: all 0.5s;
      animation: move 1s infinite alternate;

    }
/*    .son:hover{
      transform: translateX(50px);
    }*/
    /*.son:nth-child(1)
    {
      animation-delay:0.1s ;
    }
    .son:nth-child(2){
      animation-delay: 0.2s
    ;
    }
    .son:nth-child(3){
      animation-delay: 0.3s
    ;
    }
    .son:nth-child(4){
      animation-delay: 0.4s
    ;
    }
    .son:nth-child(5){
      animation-delay: 0.5s
    ;
    }*/
  </style>
</head>
<body>
<div class="fa">
 <!-- <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>-->
</div>
<script>
  let fa=document.querySelector('.fa');
  let str='';
  for (let j=1;j<=10;j++){
  for (let i=1;i<=10;i++){
    str+='<div class="son" style="width: 40px;height: 40px;animation-delay:${(i+j)*0.3}s"></div>'
  }}
  fa.innerHTML=str;
</script>
</body>
</html>