Пример CSS свойство transition-timing-function

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .box {
      padding: 2em;
      width: 40px;
      height: 40px;
      left: 0;
      background-color: #666;
      position: relative;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      -webkit-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      -moz-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      -o-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      /* первое значение соответствует первому значению свойства transition-property value, а второе соответствует второму значению*/
      }
      .example:hover .box {
      left: 450px;
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition-timing-function</h2>
    <p>Наведите курсор мыши на элемент и увидите результат сами.</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>