Question

我对css动画和关键帧功能有点问题......

我有一个眼睛眨着眼睛的小怪物......眼睛只能眨眼0.1秒

然后我希望有一个持续时间...然后动画应该循环。这是我的动画/关键帧：

@keyframes blinkingEyes {
  0% {
    transform: rotateX(0deg);    
  }
  36% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(90deg);
  }
}

这是我的动画属性：

animation: blinkingEyes 0.15s 1s infinite linear;

JSFIDDLE

我找到了一个在我的开始值和结束值之间使用x％的变通方法。但没有什么对我有用..我希望你能帮助我

Answer 1

你需要几个关键帧，然后让动画无限次运行。

请参阅：

＆＃13;

#monster {
    margin-top: 60px;
    height: 93px;
    width: 75px;
    border-radius: 120px;
    background: yellow;
    /* text-align: center; */
    position: relative;
}
    

.eye {
  height: 12px;
  width: 8px;
  background: black;
  border-radius: 10px;
  margin-top: 30px; 
  float: left;
  animation: blinkingEyes 1.5s linear infinite;
}

.eyeLeft {  
  margin-left: 18px;  
}

.eyeRight {
    margin-left: 22px;
}

.mouth {
    font-weight: 900;
    transform-origin: 50% 50%;
    /* display: inline-block; */
    width: 5px;
    margin: 0 auto;
    height: 20px;
    /* text-align: center; */
    /* left: 47%; */
    position: absolute;
    top: 47px;
    transform: rotate(90deg);
    left: 35px;
}

@keyframes blinkingEyes {
  0%, 97%, 100% {
    transform: rotateX(0deg);    
  }
  98%, 99% {
    transform: rotateX(90deg);
  }
}

＆＃13;

<div id="monster">
  <div class="monsterBody">  
    <div class="eye eyeLeft"> 
    </div>
    <div class="eye eyeRight">    
    </div>
    <div class="mouth">
      )
    </div>
</div>
</div>

＆＃13;

CSS动画之间的延迟，持续时间为0.1秒

1 个答案: