animation iteration count

• 

  moshekahol · Member · Oct 23, 2016 at 2:18 pm

  • Copy link
  • Add topic to favorites

  Hi, in most of my pages there is a bell animation at the right bottom…
  I want it to play 3 times and the stop so I use animation iteration count.
  The problem is that when it stops it stops helf way and not in “base” mode at the middle… I want it to stop in the middle – straight bell not ringing… I tried using 2.5 .2.3 etc and it won’t affect the bell – it still stops off to the right…
  How can I fix it so it stops straihg after 3 rings?

  here is the css:

  .bell {
  	-webkit-animation-name: ring;
  	animation-name: ring;
  	-webkit-animation-duration: 2s;
  	animation-duration: 2s;
  -webkit-animation-iteration-count: 3 !important;
  	animation-iteration-count: 3 !important;
  	background-color: #fff;
  	border-radius: 50% 50% 0 0;
  	height: 23.4375px;
  	position: relative;
  	-webkit-transform: rotate(-30deg);
  	transform: rotate(-30deg);
  	-webkit-transform-origin: top center;
  	transform-origin: top center;
  	width: 25px;
  }

  thanks!
  Moshe

  The blog I need help with is: (visible only to logged in users)

• 

  moshekahol · Member · Oct 23, 2016 at 2:22 pm

  • Copy link

  Hi wow lol :) it seems that adding this helped:

  -webkit-animation-fill-mode: forwards;
  	 -webkit-animation-iteration-count: 3;

  can someone explain to me why? and why the half didn’t worked?

  thanks!