animation on button to scale down and up-CodePudding

I have an image tag, when the user clicks on it I want to make that image scale down and scale up with a similar animation in phone when we do long press on app icons.

What I have tried so far

button:active {
  transform: scale(0.5);
  transform: scale(1.2);
  filter: grayscale(50%);
}

<button>
 <img src='https://picsum.photos/200/300'/>
</button>

How can I achieve this any help is appreciated

CodePudding user response：

https://codepen.io/helloCaptMomo/pen/QWOxQyx

I believe you can achieve it using animations, set the duration for what you think is considered a long press and then create a @keyframes, and use it in the animation-name property

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100vh;
}
main {
  height: 100vh;
  display: grid;
  place-content: center;
}

.button:active {
  animation-duration: 3s;
  animation-name: expand;
  /* add this if you want it maintain its final state */
  /* animation-fill-mode:forwards; */
  /* one line */
  /* animation: expand 3s forwards;*/
}

@keyframes expand {
  0% {
    transform: scale(1);
  }
  50% {
    transform:scale(0.5);
  }
  
  100% {
    transform:scale(1.2);
  }
}

html

<main>
  <button >
    <img src="https://source.unsplash.com/random/200x200/?sig=123" />
  </button>
</main>

CodePudding user response：

I think hover will do the thing

button:hover {
 transform: scale(0.5);
  transform: scale(1.2);
  filter: grayscale(50%);
}

Also if it bothers you in web view then you can use media query for this

@media(max-width: 767px){
   transform: scale(0.5);
   transform: scale(1.2);
   filter: grayscale(50%);
}