۝ OraWeb.it ۝ animation-timing-function

CSS animation-timing-function

La proprietà CSS3 animation-timing-function definisce la curva temporale dell'animazione

La proprietà animation-timing-function consente di definire la velocità con cui un'animazione cambia durante il suo ciclo. Usando valori come ease, linear, ease-in, ease-out, ease-in-out, oppure una funzione personalizzata tramite cubic-bezier(), è possibile creare animazioni più fluide e naturali, adattando il ritmo al comportamento desiderato dell'animazione.

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

Sintassi

Significato dei valori principali:

ease: valore predefinito, rende l'animazione più lenta all'inizio e alla fine, ma più veloce al centro.
linear: l'animazione ha una velocità costante per tutta la durata.
ease-in: l'animazione inizia lentamente e poi accelera.
ease-out: l'animazione inizia velocemente e poi rallenta.
ease-in-out: l'animazione inizia lentamente, accelera al centro e poi rallenta di nuovo alla fine.
cubic-bezier(x1, y1, x2, y2): consente di definire una curva temporale personalizzata, creando effetti unici di animazione.

Esempio proprietà: animation-timing-function

Codice Esempio: animation-timing-function

CODE: HTML preleva codice

```
<!DOCTYPE html>
```
```
<html lang="it">
```
```
<head>
```
```
  <meta charset="UTF-8">
```

  <title>Demo: animation-timing-function con cubic-bezier</title>

```
  <style>
```
```
    body {
```
```
      font-family: sans-serif;
```
```
      padding: 30px;
```
```
      background: #f9f9f9;
```
```
      max-width: 700px;
```
```
      margin: auto;
```
```
    }
```
```
 
```
```
    h2 {
```
```
      text-align: center;
```
```
      margin-bottom: 40px;
```
```
    }
```
```
 
```
```
    .row {
```
```
      margin-bottom: 40px;
```
```
    }
```
```
 
```
```
    .label {
```
```
      font-weight: bold;
```
```
      font-size: 14px;
```
```
      margin-bottom: 8px;
```
```
    }
```
```
 
```
```
    .track {
```
```
      position: relative;
```
```
      height: 20px;
```
```
      background: #ddd;
```
```
      border-radius: 10px;
```
```
      overflow: hidden;
```
```
    }
```
```
 
```
```
    .box {
```
```
      width: 20px;
```
```
      height: 20px;
```
```
      background-color: #0077cc;
```
```
      border-radius: 50%;
```
```
      position: absolute;
```
```
      top: 0;
```
```
      left: 0;
```
```
      animation-name: slide;
```
```
      animation-duration: 3s;
```
```
      animation-fill-mode: both;
```
```
    }
```
```
 
```

    /* Timing custom con cubic-bezier */

    .cb1 { animation-timing-function: cubic-bezier(0, 0, 1, 1); }          /* linear */

    .cb2 { animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }  /* ease */

    .cb3 { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }       /* ease-in */

    .cb4 { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }       /* ease-out */

    .cb5 { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }    /* ease-in-out */

    .cb6 { animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); } /* overshoot */

```
 
```
```
    @keyframes slide {
```
```
      0%   { left: 0; }
```
```
      100% { left: calc(100% - 20px); }
```
```
    }
```
```
  </style>
```
```
</head>
```
```
<body>
```
```
 
```

  <h2>Esempi di <code>animation-timing-function</code> con <code>cubic-bezier(...)</code></h2>

```
 
```
```
  <div class="row">
```

    <div class="label">linear – cubic-bezier(0, 0, 1, 1)</div>

```
    <div class="track">
```
```
      <div class="box cb1"></div>
```
```
    </div>
```
```
  </div>
```
```
 
```
```
  <div class="row">
```

    <div class="label">ease (default) – cubic-bezier(0.25, 0.1, 0.25, 1)</div>

```
    <div class="track">
```
```
      <div class="box cb2"></div>
```
```
    </div>
```
```
  </div>
```
```
 
```
```
  <div class="row">
```

    <div class="label">ease-in – cubic-bezier(0.42, 0, 1, 1)</div>

```
    <div class="track">
```
```
      <div class="box cb3"></div>
```
```
    </div>
```
```
  </div>
```
```
 
```
```
  <div class="row">
```

    <div class="label">ease-out – cubic-bezier(0, 0, 0.58, 1)</div>

```
    <div class="track">
```
```
      <div class="box cb4"></div>
```
```
    </div>
```
```
  </div>
```
```
 
```
```
  <div class="row">
```

    <div class="label">ease-in-out – cubic-bezier(0.42, 0, 0.58, 1)</div>

```
    <div class="track">
```
```
      <div class="box cb5"></div>
```
```
    </div>
```
```
  </div>
```
```
 
```
```
  <div class="row">
```

    <div class="label">overshoot – cubic-bezier(0.68, -0.55, 0.27, 1.55)</div>

```
    <div class="track">
```
```
      <div class="box cb6"></div>
```
```
    </div>
```
```
  </div>
```
```
 
```
```
</body>
```
```
</html>
```

Contenuto Esempio: animation-timing-function

Prova questo esempio

DEMO

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

CSS animation-timing-function

La proprietà CSS3 animation-timing-function definisce la curva temporale dell'animazione

Sintassi

Significato dei valori principali:

Esempio proprietà: animation-timing-function

Supporto Browser

Follow us

Quick Links

Information

Contact Information