Playful pop – CSS animation examples

To achieve this we tend to use each the ::before and ::after pseudo components – one for every one of our animated circles. we tend to fully position each of the weather, fixing them to the initial button. so as to animate from the center, we’re conjointly setting the remodel origin to the center of the component.

We’ve set the initial scale of our ::before component to zero, therefore, we will transition the worth once interacted with. The transition property performs the animation. after we move with our component, we tend to merely increase the size.

However, since we’ve conjointly modified the interpretation (another worth of the remodeled property), we’d like to hold that worth to the new remodel property’s worth. The outer circle is achieved employing a terribly easy keyframe animation – transitioning the opacity.

HTML Code:

<div class="container">
  
  <a href="#" class="scroll-down">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <path d="m0 93.301l49.996-86.602 50.004 86.602z"/>
    </svg>

  </a>
  
</div>

CSS Code:

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  background-color: #dedede;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100vh;
}

.scroll-down {
  position: relative;
  background-color: red;
  width: 4rem;
  height: 4rem;
  padding: 1.618rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 0;
}
.scroll-down::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  width: 105%;
  height: 105%;
  background-color: white;
  border-radius: 50%;
  will-change: transform;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
}
.scroll-down::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  border-radius: 50%;
  will-change: transform;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
}
.scroll-down svg {
  max-width: 25.888px;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  fill: white;
  -webkit-transition: fill 300ms;
  transition: fill 300ms;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.scroll-down:hover::before {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
.scroll-down:hover::after {
  -webkit-transform: translate(-50%, -50%) scale(1.2);
          transform: translate(-50%, -50%) scale(1.2);
  -webkit-animation: fade 300ms;
          animation: fade 300ms;
}
.scroll-down:hover svg {
  fill: red;
}

@-webkit-keyframes fade {
  50% {
    opacity: 0.25;
  }
}

@keyframes fade {
  50% {
    opacity: 0.25;
  }
}

Demo | Download