当前位置：网站首页>Animation effect

Animation effect

2022-07-24 06:29:00 【PS notes】

Call the animation effect with animation, Define animation with keyframes

The difference between animation effect and excessive effect ：

animation-name: Specifies the keyframe name .

animation-duration: Specify the time it takes to complete the animation effect , In seconds .

animation-timing-function: Speed curve of specified animation

animation-delay： Specify the delay before the animation starts

animation-iteration-count: Specify the number of times the animation should be interrupted

@keyframes anim {0%{transform:translate(0px,0px)

}}

100%{

transform:translate(900px,100px)

}

Box rotation animation case ：

animation: anim 2s linear 1s infinite Cycle all the time ;

animation: Animation name + How many seconds to complete +linear Excessive uniform speed + How many seconds + rotate 2 Time （ If you want to keep cycling infinite）

<style>
    /*  use keyframe Define an animation  */
    @keyframes anim{
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      margin:100px auto;
      /* animation: Animation name + How many seconds to complete +linear Excessive uniform speed + How many seconds + rotate 2 Time （ If you want to keep cycling infinite） */
      animation: anim 2s linear 1s infinite; 
     
    }
  </style>
</head>
<body>
  <div class="box">hello</div>
</body>
</html>

Case study ： According to % from 0-100 Set the corresponding changes between , As wide , high , Background color , etc. , One thing to pay attention to is the beginning 0% The width and height of should be the same as that of the end 100% Consistent width and height , In this way, the vision will be smoother , good-looking .

<style>
    /*  use keyframe Define an animation  */
    @keyframes anim{
      0%{
        transform: rotate(0deg);
      }
      20%{
        width: 200px;
        height: 200px;
        transform: rotate(360deg);
      }
      40%{
        background-color: yellow;
        width: 300px;
        height: 300px;
      }
      100%{
        width: 100px;
        height: 100px;
      }
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      margin:100px auto;
      /* animation: Animation name + How many seconds to complete +linear Excessive uniform speed + How many seconds + rotate 2 Time （ If you want to keep cycling infinite） */
      animation: anim 10s linear; 
     
    }
  </style>
</head>
<body>
  <div class="box">hello</div>
</body>
</html>

=======================================================================

keyframes

1, Specify animation in percentage

2,from.....to..... Assign animation Which is the same thing as 0%-100%

Be careful ： The beginning is the same as the end , It can make the animation smoother .

<style>
    /*  use keyframe Define an animation  */
    @keyframes anim{
      /* 0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      } */
      /*  It can be written as follows  */
      form{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      margin:100px auto;
      /* animation: Animation name + How many seconds to complete +linear Excessive uniform speed + How many seconds + rotate 2 Time （ If you want to keep cycling infinite） */
      animation: anim 2s linear ; 
     
    }
  </style>
</head>
<body>
  <div class="box">hello</div>
</body>
</html>

CD Rotation effect ：

Stop Animation

animation-play-state:paused;

 <style>
 /* CD Rotation effect  */
    @keyframes anim {
      form{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }
      
    }
    .box{
      height: 200px;
      width: 200px;
      margin: 100px auto;
      border-radius: 50%;
      overflow: hidden;
      animation: anim 3s linear  infinite;
    }
    .box img{
      height: 200px;
      width: 200px;
    }
    .box:hover{
      animation-play-state:paused;
    }
  </style>
</head>
<body>
  <audio src="" controls></audio>
  <div class="box">
    <img src="ppp.jpg" alt="">
  </div>
</body>
</html>