Is this animation CSS only, or does it need JS as well?

On this page for downloading Google Chrome, if you hover you mouse over the Chrome logo, a radial animation is played. Console shows the img has the following in-line style:

-webkit-mask-image: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));

I doubt the animation is the result of the style (or at least there should be other code contributing to it). The reasons I think so are:

  • There is no time component for key-framing in the style,
  • It is applied to the element directly and not through a :hover psudo selector,
  • When I apply the same style to images on other pages (in console), no animation is added.

So, how is it implemented?

1 answer

  • answered 2018-02-13 01:36 Kosh Very

    The pure CSS solution:

    div:after {
      content: '';
      position: absolute;
      left: -3.335em;
      width: 8em;
      height: 8em;
      margin: 0 .25em 0 0;
      border-radius: 55%;
      background: radial-gradient(transparent 1em, rgba(255, 255, 255, .9) 2em, transparent 3em);
      transform: scale(0);
      transform-origin: 50% 50%;
    }
    
    div:hover:after {
      transform: scale(1.4);
      transition: transform 1s ease-in
    }
    
    div {
      position: relative;
      display: inline-flex;
      align-items: center;
      font: 400 4rem/2 sans-serif;
      color: #777;
      overflow:hidden;
    }
    
    div:before {
      content: '';
      width: .65em;
      height: .65em;
      margin: 0 .25em 0 0;
      border: solid .35em;
      border-radius: 55%;
      border-color: #e42 #777 #3b5 #fb0;
      box-shadow:inset 0 0 0 .08em #fff;
      background:#59f content-box;
    }
    <div>chronic</div>