very dangerous code on a hacker's screen from tv

Image: pankaj patel

CSS can animate?

Maybe you already are somewhat aware, maybe not but CSS is one of the most powerful tools in a web developer's arsenal. It has the power to transform bland and uninteresting web pages into visually stunning works of art. With just a few lines of code, CSS can be used to create intricate animations, dynamic styling and sophisticated visuals that can truly wow your website visitors. Additionally, using CSS makes it easier to create consistent styles across multiple pages and devices, ensuring a consistent user experience. Alas, CSS can be pretty amazing at producing interesting eye candy.

Hypnotic Example

I wanted to demonstrate one example here:

How it works

"What's going on here?", you ask. A few properties are to be noted:

• use a class on some element that has a fixed height and width

  
      .css-animation {
        height: 150px;
        width: 150px;
      }
  
  

• define some @keyframes to define the 'steps' of the animation

  
    @keyframes stretch {
      0% {
        transform: scale(.3);
        background-color: purple;
        border-radius: 100%;
      }
  
      50% {
        background-color: orange;
      }
  
      100% {
        transform: scale(1.5);
        background-color: aliceblue;
      }
    }
  
  

• note how the @keyframes have specific colors and border radii that are associated with each frame
• now finally, set the duration of the entire animation using animation-duration CSS property

  
    .css-animation {
      height: 150px;
      width: 150px;
      margin: 0 auto;
      background-color: purple;
      animation-name: stretch;
      animation-duration: 1.5s;
      animation-timing-function: ease-out;
      animation-delay: 0;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-fill-mode: none;
      animation-play-state: running;
    }
  
  

• set the animation-iteration-count to infinite to make the mesmerizing effect last forever

Conclusion

This is just a basic example, and things can get even weirder. I'll leave it here for now, but CSS can be applied to all sorts of things, such as animating notifications, button clicks (like in Material UI), or even using it when images are lazy-loaded when scrolled into view.

Loading...