Как получить ключевой кадр, чтобы колокол выглядел так, как будто он звонит - PullRequest
Новая
       28

Как получить ключевой кадр, чтобы колокол выглядел так, как будто он звонит

0 голосов
/ 26 июня 2019

Я пытаюсь создать ключевой кадр, чтобы сделать изображение колокольчика таким, как будто оно звонит.На данный момент ключевой кадр не работает или, по крайней мере, кажется, что он не работает.

Кто-нибудь видит, что я делаю неправильно? 

#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);
    }
}

1 Ответ

1 голос
/ 26 июня 2019

В ваших правилах ключевых кадров есть некоторые опечатки 

@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>
...