2
\$\begingroup\$

I just came through a GitHub repo, which has an amazing animation for Button in Android.

So, I though why not make that for web buttons too.

And I started designed that.

Here is my repo for the same.

Here is my code:

let icons = $('.magic')

for (let i = 0; i < icons.length; ++i) {
    icons[i].onclick = function (element) {
        icons[i].classList.toggle('enabled');
    }
}
.magic {
    display: inline-block;
    margin: 50px;
    position: relative;
  }

  .magic i {
    color: orange;
    filter: grayscale(100%);
    position: relative;
    animation: disable 0.5s forwards;
  }

  .enabled i {
    animation: enable 1s forwards;
  }

  .magic::before {
    content: "";
    top:calc(50% - 45px);
    left:calc(50% - 45px);
    width: 90px;
    height: 90px;
    position: absolute;
    border-color: orange;
    border-style: solid;
    border-width: 45px;
    border-radius: 50%;
    transform: scale(0);
    box-sizing: border-box;
  }

  .enabled::before {
    transition:
      transform 0.5s,
      border-width 0.5s 0.2s;
    transform: scale(1);
    border-width: 0px;
  }

  .magic::after,
  .magic i::after {
    content: "";
    position: absolute;
    top: calc(50% - 80px);
    left: calc(50% - 80px);
    height: 160px;
    width: 160px;
    background:
      radial-gradient(circle, red 50%, transparent 60%),
      radial-gradient(circle, red 50%, transparent 60%),
      radial-gradient(circle, red 50%, transparent 60%),
      radial-gradient(circle, red 50%, transparent 60%),
      radial-gradient(circle, orange 50%, transparent 60%),
      radial-gradient(circle, orange 50%, transparent 60%),
      radial-gradient(circle, orange 50%, transparent 60%),
      radial-gradient(circle, orange 50%, transparent 60%);

    background-position:  
      calc(50% - 50px) calc(50% - 50px),
      calc(50% - 50px) calc(50% + 50px),
      calc(50% + 50px) calc(50% - 50px),
      calc(50% + 50px) calc(50% + 50px),
      calc(50% - 0px) calc(50% - 70px),
      calc(50% - 70px) calc(50% - 0px),
      calc(50% - 0px) calc(50% + 70px),
      calc(50% + 70px) calc(50% - 0px);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    border-radius:50%;
    transform: scale(0);
  }

  .magic i:after {
    background-size: 10px 10px;
    transform: rotate(10deg) scale(0);
  }

  .enabled::after {
    transition: 
      transform 0.5s 0.5s,
      opacity 0.4s 1s,
      background-size 0.4s 1s;

    transform: scale(1);
    opacity: 0;
    background-size: 0 0;
  }

  .enabled i:after {
    transition: 
      transform 0.5s 0.5s,
      opacity 0.4s 0.8s,
      background-size 0.4s 0.8s;

    transform: rotate(10deg) scale(1);
    opacity: 0;
    background-size: 0 0;
  }

  @keyframes enable {
    50% {
      filter: grayscale(100%);
      transform: scale(0);
    }
    51% {
      filter: grayscale(0%)
    }
    90% {
        transform: scale(1.3)
    }
    100% {
      filter: grayscale(0%);
      transform: scale(1);
    }
  }

  @keyframes disable {
      50% {
          filter: grayscale(0%);
          transform: scale(1.3);
      }
      100% {
          transform: scale(1);
      }

  }
<span class="magic">
    <i class="fas fa-star fa-5x"></i>
</span>

<span class="magic">
    <i class="fas fa-bell fa-5x"></i>
</span>

<span class="magic">
    <i class="fas fa-bolt fa-5x"></i>
</span>

<span class="magic">
    <i class="fas fa-check fa-5x"></i>
</span>

<span class="magic">
    <i class="fas fa-thumbs-up fa-5x"></i>
</span>

<!-- Other stuff -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

What do you reckon? Is there anything I can improve either in the animation or in the code?

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.