如何获取关键帧以使响铃看起来像在响

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>