1
\$\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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.