如何获得关键帧以使铃声看起来好像在响

Question

我正在尝试创建一个关键帧，使铃铛的图片看起来好像在响。截至目前，关键帧不是运行或至少看起来不是运行.

有没有人看出我做错了什么？

#subscribeButton {
 width: 50%;
 height: 150px;
 background: #1b8c00;
 background: #5fae4c;
 border: 2px solid #FFF;
 position: fixed;
 left: 0;
 bottom: 0;
 cursor: pointer;
}
#subscribeButton img {
 width: 70px;
 height: auto;
 display: block;
 margin: 10px auto;
 text-align: center;
 -webkit-animation-name: shake;
 animation-name: shake;
 -webkit-animation-duration: 0.4s;
 animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
 animation-iteration-count: 2;
 animation-delay: 2s;
   /* transform-origin(50% 6px);*/
}
#subscribeButtonText {
 color: #FFF;
 font-family: Verdana, sans-serif;
 font-size: .8rem;
 padding: 5px;
 text-align: center;
 text-transform: uppercase;
}

@-webkit-keyframes shake {
  0%, 100% { transform(rotate(0)); }
  20%, 60%    { transform(rotate(6deg)); }
  40%, 80% { transform(rotate(-6deg)); }
}

@keyframes shake {
  0%, 100% { transform(rotate(0)); }
  20%, 60%    { transform(rotate(6deg)); }
  40%, 80% { transform(rotate(-6deg)); }
}

<div id="subscribeButton">
 <img src="https://images-na.ssl-images-amazon.com/images/I/41ft-avvlhL.jpg" alt="bell">
 <div id="subscribeButtonText">Subscribe for Inventory Notifications</div>
</div>

更新的关键帧代码：

@keyframes shake {
    0%,
    100% {
        transform: rotate(0deg);
    }
    10%,
    40% {
        transform: rotate(6deg);
    }
    40%,
    60% {
        transform: rotate(0deg);
    }
    60%,
    90% {
        transform: rotate(-6deg);
    }
}

Answer 1

您的关键帧规则有一些拼写错误

@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20%,
  60% {
    transform: rotate(6deg);
  }
  40%,
  80% {
    transform: rotate(-6deg);
  }
}

#subscribeButton {
  width: 50%;
  height: 150px;
  background: #1b8c00;
  background: #5fae4c;
  border: 2px solid #fff;
  cursor: pointer;
}

#subscribeButton img {
  width: 70px;
  height: auto;
  display: block;
  margin: 10px auto;
  text-align: center;
  animation-name: shake;
  animation-timing-function: ease-in-out;
  animation-duration: .5s;
  animation-iteration-count: 2;
  animation-delay: .5s;
}

@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20%,
  60% {
    transform: rotate(6deg);
  }
  40%,
  80% {
    transform: rotate(-6deg);
  }
}

<div id="subscribeButton">
  <img src="https://images-na.ssl-images-amazon.com/images/I/41ft-avvlhL.jpg" alt="bell">

</div>

如何获得关键帧以使铃声看起来好像在响

How to get a keyframe to make a bell appear as if it is ringing

css

keyframe

css-animations