why pressing animation only effect for once?

Question

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="#" class="icon">
  <img src="https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/brand-download-img-1.jpg.twimg.1920.jpg">
</a>

Nick Vu · Accepted Answer · 2022-07-02T05:20:53.087

2

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="#" class="icon">
  <img src="https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/brand-download-img-1.jpg.twimg.1920.jpg">
</a>

edited Jul 02 '22 at 05:20

answered Jul 02 '22 at 02:50

Nick Vu

14,512
4
21
31

this is even ...worse. The box shadow completely disappear after the click. I want the box-shadow to "restore" in 0.2s after user click – Maggie Jul 02 '22 at 04:28
I misunderstood your expectation, so I just modified my answer for your sake of expectation, @Maggie – Nick Vu Jul 02 '22 at 05:09
If you think it's useful, please mark it as the right answer to your question. That will give me as well as this community a little support. Thank you :D @Maggie – Nick Vu Jul 02 '22 at 05:57

score 0 · Answer 2 · answered Jul 02 '22 at 03:36

0

Not use keyframes

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

answered Jul 02 '22 at 03:36

theaminuldev

109
8

score 0 · Answer 3 · answered Jul 02 '22 at 03:53

0

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

or

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

answered Jul 02 '22 at 03:53

mrash

883
7
18

this is just making the icon box blinking like crazy.... – Maggie Jul 02 '22 at 04:29
you can change infinity to any number and you can change 0s to 2s for wait before animation – mrash Jul 02 '22 at 04:37

score 0 · Answer 4 · answered Jul 02 '22 at 05:43

Instead of focus, use active. See the differences here. Also, when creating the animation, you need to add the forwards attribute. But personally, I would go with not setting any animation, instead, directly setting the box-shadow property to none. This removes the lag that you are seeing.

.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 forwards 0.1s ease-in-out; */
  box-shadow: none;
}

@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="#" class="icon">
  <img src="https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/brand-download-img-1.jpg.twimg.1920.jpg">
</a>

why pressing animation only effect for once?

4 Answers4