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

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>