CSS code for various animated transition effects

General
1

This is a CSS that I found on the internet and I’ve been making changes and adding new transitions, if it’s useful for any of my friends I’m happy to help!

@keyframes pulse {
  0%, to {
    -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);
  }
}

.pulse {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-delay: 1.8s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  animation-delay: .7s;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }
  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
    transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
    -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(.55,.055,.675,.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
    animation-timing-function: cubic-bezier(.175,.885,.32,1);
  }
}

.zoomInRight {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(.55,.055,.675,.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
    animation-timing-function: cubic-bezier(.175,.885,.32,1);
  }
}

.zoomInUp {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
2 Likes
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
3

It turned out great, congratulations.

4

@printninja

Don’t use the property will-change if it isn’t absolutely needed. In your case it’s not needed. box-shadow is supported in all browsers so -moz-box-shadow not needed. Scale is a property by its own so you don’t need the transform property for scale. I’d done your pulse animation like this

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

.pulse:hover {
  animation: none;
}

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

Thanks for the help. You are so good with this stuff! I probably copied this CSS from a website years ago which is why there’s a browser prefix. Lately, I’ve been going through a lot of my older websites and taking out unneeded CSS prefixes. It’s tedious work.

(I think I added the will-change as a last ditch effort to reduce some graphical aberration taking place in the fonts as the button pulsed. I think it helped at the time. will-change - CSS: Cascading Style Sheets | MDN)

2 Likes