mozilla
Risultati di ricerca

    transition-timing-function

    Sommario

    La proprietà CSS transition-timing-function è usata per descrivere come gli stati intermedi delle proprietà CSS vengono modificati quando viene calcolato il risultato di un effetto di transizione. Ti permette di definire una curva di accelerazione, in modo che la velocità della transizione possa variare nell'arco della sua durata.

    Questa curva di accelerazione viene definita utilizzando uno <timing-function> per ogni proprietà che ottiene una transizione.

    È possibile specificare un numero arbitrario di funzioni di temporizzazione; ciasuna di queste sarà applicata alla corrispondente proprietà seguendo le specifiche in transition-property, dove in questo caso si comporta come la lista principale.

    Se ci sono meno funzione specificate rispetto alle proprietà presenti nella lista, i valori mancanti saranno impostati a quello iniziale (ease). Se ci sono più funzioni di temporizzazione, i valori verranno applicati seguendo la lista principale e i valori in eccesso verranno semplicemente scartati. In entrambi i casi entrambe le dichiarazioni sono considerate valide.

    Sintassi

    Formal syntax: <timing-function>#
    
    transition-timing-function: ease
    transition-timing-function: ease-in
    transition-timing-function: ease-out
    transition-timing-function: ease-in-out
    transition-timing-function: linear
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
    transition-timing-function: step-start
    transition-timing-function: step-end
    transition-timing-function: steps(4, end)
    
    transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
    
    transition-timing-function: inherit
    

    Valori

    <timing-function>
    Ciascun <timing-function> rappresenta una funzione di temporizzazione che dovrà essere linkata alla corrispondente proprietà che avrà la transizione, come definito in transition-property.

    Esempi

    transition-timing-function: ease

     <div class="parent">
      <div class="box">Lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease;
    }
    .box1{
        width: 50px;
        height: 50px;
        background-color: blue;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease;
    }
    
    function updateTransition() {
      var el = document.querySelector("div.box");
       
      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }
       
      return el;
    }
    
    var intervalID = window.setInterval(updateTransition, 7000);
    

    transition-timing-function: ease-in

     <div class="parent">
      <div class="box">Lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
         -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-in;
    }
    .box1{
        width: 50px;
        height: 50px;
        background-color: blue;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-in;
    }
    
    function updateTransition() {
      var el = document.querySelector("div.box");
       
      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }
       
      return el;
    }
    
    var intervalID = window.setInterval(updateTransition, 7000);
    

    transition-timing-function: ease-out

     <div class="parent">
      <div class="box">Lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-out;
    }
    .box1{
        width: 50px;
        height: 50px;
        background-color: blue;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-out;
    }
    
    function updateTransition() {
      var el = document.querySelector("div.box");
       
      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }
       
      return el;
    }
    
    var intervalID = window.setInterval(updateTransition, 7000);
    

    transition-timing-function: ease-in-out

     <div class="parent">
      <div class="box">Lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-in-out;
    }
    .box1{
        width: 50px;
        height: 50px;
        background-color: blue;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-in-out;
    }
    
    function updateTransition() {
      var el = document.querySelector("div.box");
       
      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }
       
      return el;
    }
    
    var intervalID = window.setInterval(updateTransition, 7000);
    

    transition-timing-function: linear

     <div class="parent">
      <div class="box">Lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: linear;
    }
    .box1{
        width: 50px;
        height: 50px;
        background-color: blue;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: linear;
    }
    
    function updateTransition() {
      var el = document.querySelector("div.box");
       
      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }
       
      return el;
    }
    
    var intervalID = window.setInterval(updateTransition, 7000);
    

    transition-timing-function: step-start

     <div class="parent">
      <div class="box">Lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: step-start;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: step-start;
    }
    .box1{
        width: 50px;
        height: 50px;
        background-color: blue;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: step-start;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: step-start;
    }
    
    function updateTransition() {
      var el = document.querySelector("div.box");
       
      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }
       
      return el;
    }
    
    var intervalID = window.setInterval(updateTransition, 7000);
    

    transition-timing-function: step-end

     <div class="parent">
      <div class="box">Lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: step-end;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: step-end;
    }
    .box1{
        width: 50px;
        height: 50px;
        background-color: blue;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: step-end;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: step-end;
    }
    
    function updateTransition() {
      var el = document.querySelector("div.box");
       
      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }
       
      return el;
    }
    
    var intervalID = window.setInterval(updateTransition, 7000);
    

    transition-timing-function: steps(4, end)

     <div class="parent">
      <div class="box">Lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: steps(4, end);
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: steps(4, end);
    }
    .box1{
        width: 50px;
        height: 50px;
        background-color: blue;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: steps(4, end);
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: steps(4, end);
    }
    
    function updateTransition() {
      var el = document.querySelector("div.box");
       
      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }
       
      return el;
    }
    
    var intervalID = window.setInterval(updateTransition, 7000);
    

    Specifiche

    Specification Status Comment
    CSS Transitions Working Draft  

    Compatibilità tra Browser

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes)-webkit 4.0 (2.0)-moz
    16.0 (16.0)
    10 11.6-o
    12.10 #
    (Yes)-webkit
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes)-webkit (Yes)-webkit 4.0 (2.0)-moz
    16.0 (16.0)
    ? ? (Yes)-webkit

    Vedi Anche

    Etichette del documento e nomi di chi ha collaborato alla sua stesura

    Contributors to this page: Andrea Barghigiani, teoli
    Ultima modifica di: teoli,
    Nascondi barra laterale