<!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">