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

**URL:** <https://forum.kirupa.com/t/using-the-linear-timing-function-with-fallback-for-safari-ios/661242>\
**Category:** web dev\
**Created:** [August 28, 2023, 2:24am UTC](https://forum.kirupa.com/t/using-the-linear-timing-function-with-fallback-for-safari-ios/661242 "2023-08-28T02:24:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 28, 2023, 2:24am UTC](https://forum.kirupa.com/t/using-the-linear-timing-function-with-fallback-for-safari-ios/661242/1 "2023-08-28T02:24:22Z")

</div>

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:

https://codepen.io/kirupa/embed/preview/mdaVWVq?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=mdaVWVq

The full code is here:

```auto
<!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 🚆

---

<div class="post-metadata">

**Author:** ![mostakin](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mostakin/32/23453_2.png) [@mostakin](https://forum.kirupa.com/u/mostakin)\
**Post date:** [September 18, 2023, 1:19am UTC](https://forum.kirupa.com/t/using-the-linear-timing-function-with-fallback-for-safari-ios/661242/3 "2023-09-18T01:19:04Z")

</div>

very helpful information.thanks
