CSS code for various animated transition effects

General
2

Here one I made to change the pulse effect on some of my website buttons…

button

.pulse {
  box-shadow: 0 0 0 0 rgba(0,50,125,0.4);
  animation: pulse 3s infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
}

.pulse:hover {
  animation: none;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    -moz-box-shadow: 0 0 0 0 rgba(0,46,164,0.4);
    box-shadow: 0 0 0 0 rgba(0,46,164,0.4);
  }
  50% {
    transform: scale(1.05);
    -moz-box-shadow: 0 0 0 40px rgba(255,0,0,0);
    box-shadow: 0 0 0 40px rgba(255,0,0, 0);
  }
  100% {
    transform: scale(1);
    -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
    box-shadow: 0 0 0 0 rgba(255,0,0, 0);
  }
}
3 Likes