主页 / 问题 / 1317681
Accepted
kiskiskit
Asked:2022-08-15 00:46:27 +0800 CST2022-08-15 00:46:27 +0800 CST

为什么@keyframes 不起作用？

  • 772

请告诉我为什么动画不适合我。我使用@keyframes。我在哪里做错了？

.wrapper {
  margin: 0 auto; 
  width: 500px;
  height: 500px;
  background: #FFCC99;
}

.circle { 
  width: 100px;
  height: 100px;
  background: #FF6666;
  border-radius: 100%;
  animation-name: circle;
  animation-duration: 2s;
}


@keyframes circle{
  0% {
    left: 0%;
  }
  
  50% {
    
  }
  
  
  100% {
    left: 100%;
  }
}
<div class="container">
  <div class="wrapper">
    <div class="circle">
      
    </div>
  </div>
</div>

css

2 个回答

  1. Best Answer

    该元素有.circle一个默认值position- static，它似乎知道它不知道left其他规则的存在。

    告诉他，让我们说position: relative

    .wrapper {
  margin: 0 auto; 
  width: 500px;
  height: 500px;
  background: #FFCC99;
}

.circle { 
  width: 100px;
  height: 100px;
  background: #FF6666;
  border-radius: 100%;
  animation-name: circle;
  animation-duration: 2s;
  position: relative;
}


@keyframes circle{
  0% {
    left: 0%;
  }
  
  50% {
    
  }
  
  
  100% {
    left: 100%;
  }
}
    <div class="container">
  <div class="wrapper">
    <div class="circle">
      
    </div>
  </div>
</div>

    • 4

  2. 在动画中使用 left 意味着对象的位置必须是绝对的。只需添加 circle position: absolute; 到班级。但我的意思是，你将相对于父级定位，所以我建议使用以下命令：transform: translateX(0%); 和变换： translateX(100%);

    • 1

相关问题