Using the linear() timing function (with fallback for Safari/iOS)

programming web dev
1

Hi everyone!

This is a companion post to my latest newsletter article where I explain how to use the linear() timing function with a fallback for browsers like Safari that don’t support it yet.

Live example:

The full code is here:

<!DOCTYPE html>
<html>

<head>
  <title>CSS Transitions!</title>

  <style>
    :root {
      --custom-easing: cubic-bezier(.09, 1, .42, 1.37);
      --duration: .15s;
    }

    @supports (transition-timing-function: linear(0, .1, 1)) {
      :root {
        --custom-easing: linear(0, 0.22 2%, 1.11 8%, 1.3, 1.37, 
                            1.37, 1.36 14%, 1.32 16%, 0.94 24%, 0.89,
                            0.87, 0.87, 0.88 31%, 1.01 38%, 1.04, 1.05,
                            1.04 46%, 1 53%, 0.98 58%, 1.01, 1 87%, 1);
        --duration: .5s;
      }
    }

    body {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;

      display: grid;
      place-items: center;
    }

    #hexagon {
      transition: transform var(--duration) var(--custom-easing);
    }

    #hexagon:hover {
      transform: scale3d(1.2, 1.2, 1) rotate(45deg);
    }
  </style>
</head>

<body>
  <div id="container">
    <img id="hexagon" src="https://www.kirupa.com/images/hexagon.svg" />
  </div>
</body>

</html>

I’ll update this post as I find more interesting details to share!

Cheers,
Kirupa :train:

1 Like
3

very helpful information.thanks