当前位置：首页 > article >正文

css中的animation

article 2025/1/30 12:44:49

css的animation

animation是一个综合属性,是animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline这些属性的简写

不过在使用的时候，只有animation-name和animation-duration是必须的

例如:

animation:testkeyframe 3s

我们也可以做更多的设置

例如:

animation:testkeyframe 3s linear 1s infinite
//对应的属性
//animation:
//testkeframe关键帧名字 
//3s动画持续时间 
//linear动画时间曲线  
//1s动画在多少时间之后开始执行  
//infinite动画循环次数

其中关键帧名字是对@keyframes的引用

@keyframes testkeyframe{
  0%{}
  50%{}
  100%{}
}

注意事项:

@keyframes中改变的属性必须是调用关键帧的元素里面已有的属性

比如调用关键帧的那个元素已有了transform:translateX(100px)

这样才能在@keyframe中不同阶段进行调整

示例:

html
<div class="container">
 <div class="testEl"></div>
</div>
css
 .container{
   position: relative;
   margin: 50px auto;
   width: 500px;
   height: 500px;
   border-radius: 5px;
   box-shadow: 1px 1px 10px 5px #d5d5d5;
 }

 .testEl{
   position:absolute;
   top: 20px;
   left: 20px;
   width: 100px;
   height: 100px;
   background-color: #aff;
   transform: translateX(0px);   //元素本身已有的属性，才能实现动画效果
   animation: testAn 3s linear infinite 1s;
 }
 @keyframes testAn {
   0%{
     transform: translateX(0px);
   }
   50%{
     transform: translateX(20px);
   }
   100%{
     transform: translateX(0px);
   }
 }
此外还需要注意的是：

animation属性的值animation-duration和animation-delay

必须严格顺序：name → duration → delay

其他的内容可以自由搭配，不过都需要在name的后面

按照正确的顺序，才能正常解析成我们所需的动画效果
animation:testkeyframe 3s linear 1s infinite
//这里的3s就是animation-duration
//这里的1s就是animation-delay