CODEWITHSUNDEEP
css
Pascal
Pascal

Reputation: 119

Pure CSS zoom animation based on timer?

I know I can do a zoom animation in CSS, when hovering a button for example.

But I was wondering if I could make the zoom animation based on a specific timer. Like a short zoom in and zoom out animation during 0.5s, which comes back every 5 seconds.

Something like the button on this URL https://www.laboutiquetrend.com/collections/produits/products/epilateur-corporel-2-0 (scroll a bit to make it appear)

enter image description here

Again, it would help if this is only CSS, since I apply custom CSS on the elements of a theme.

Let me know thanks :)

Upvotes: 0

Views: 1009

Answers (1)

user7148391
user7148391

Reputation:

I made some modifications, it's now pure CSS however it's a bit poor. 

* {
  margin: 0;
  padding: 0;
}

div {
  background-color: #ccc333;
  width: 300px;
  height: 90px;
  margin: 20px auto;
  animation-name: pulse;
  /*animation-fill-mode: both;*/
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  15% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  30% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  15% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  30% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
<div></div>

Upvotes: 1

Related Questions