why pressing animation only effect for once?-CodePudding

I want to make a button pressing animation using .div:focus pseudo-class. But it seems to only work once after the browser is refreshed.

I can't figure out how to make it effective every time when the user presses the button... Below are the HTML and CSS.

.icon {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  width: 220px;
  margin: 15px 0px;
  background-color: #f2f3f7;
  box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
  border-radius: 3rem;
  overflow: hidden;
}

.icon img {
  width: 86%;
  height: 86%;
  border-radius: 50%;
}

.icon:focus {
  animation: pressbtn 0.2s ease-in-out;
}

@keyframes pressbtn {
  0% {
    box-shadow: inset 0.6rem 0.6rem 1.2rem #d2dce9, inset -0.5em -0.5em 1em #ffffff;
  }
  100% {
    box-shadow: none;
  }
}

<a href="#" >
  <img src="https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/brand-download-img-1.jpg.twimg.1920.jpg">
</a>

CodePudding user response：

focus state always keeps until you click outside of that element again, so that's why you cannot trigger focus again afterward if you never loose focus on the current element.

I'd suggest you use .icon:active instead which will apply on every clicks on your expected element.

.icon {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  width: 220px;
  margin: 15px 0px;
  background-color: #f2f3f7;
  box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
  border-radius: 3rem;
  overflow: hidden;
}

.icon img {
  width: 86%;
  height: 86%;
  border-radius: 50%;
}

.icon:active {
  animation: pressbtn 0.2s ease-in-out;
}

@keyframes pressbtn {
  0% {
    box-shadow: inset 0.6rem 0.6rem 1.2rem #d2dce9, inset -0.5em -0.5em 1em #ffffff;
  }
  100% {
    box-shadow: none;
  }
}

<a href="#" >
  <img src="https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/brand-download-img-1.jpg.twimg.1920.jpg">
</a>

CodePudding user response：

Not use keyframes

  .icon:focus {
     box-shadow: none;
  }

CodePudding user response：

You should use animation-iteration-count: infinite; in .icon:focus or add it in animation key of .icon:focus:

.icon:focus {
  animation: 0.2s ease-in-out 0s infinite pressbtn;
}

.icon:focus {
  animation: pressbtn 0.2s ease-in-out;
  animation-iteration-count: infinite;
}