MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Использование CSS переходов

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.

Анимации, составляющие переход между двумя состояниями часто называют неявные переходы как состояния, в период между начальным и конечным состоянием неявно определенные браузером.A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой  продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).

Замечание: CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старый версий браузеров (таких как: Firefox 15 и ранние, Opera 12 и более ранних). Таблица совместимости доступна внизу страницы с ещё большим количеством информации.

Какие CSS свойства анимируются?

Разработчик может определить какое свойство и как анимировать. Это позволяет создавать множественные переходы. Не имеет смысла анимировать некоторые свойства, лист доступных для анимирования свойств ограничен определенным набором.

Замечание: Набор анимируемых свойств может меняться. Программисты должны быть осторожны.

Если свойства значение auto - это сложный случай. По спецификации, если свойству было установлено тоже значение, что и было - оно не анимируется. Браузеры, основанные на Gecko, исполняют это требование, а основанные на WebKit менее строгие. Использование переходов с auto может привести к непредсказуемым результатам, взависимости браузера и его версии, этого следует избегать.

Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью .appendChild() или удаления его display: none; свойства. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить window.setTimeout() c некоторым количеством миллисекунд до изменения CSS свойства, которое вы собираетесь анимировать.

Пример анимирования нескольких свойств

HTML

<body>
    <p>К блоку ниже применятся анимации для свойств: width, height, background-color, transform. Наведите на него, чтоб увидеть, как они анимируются</p>
    <div class="box"></div>
</body>

CSS

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

CSS свойства, опредяющие переходы

CSS переходы контролируются свойством transition. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.

Можно контролировать определенные параметры перехода следующими подсвойствами:

(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS transitions только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство animation.)

transition-property
Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.
transition-duration
Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности.

transition-duration: 0.5s

 <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 transform -webkit-transform color;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    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 transform -webkit-transform color;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transformv color;
    transition-duration: 0.5s;
    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-duration: 1s

 <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 -webkit-transform color;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform color;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    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 -webkit-transform transform color;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 1s;
    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-duration: 2s

 <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 transform -webkit-transform color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    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 transform -webkit-transform color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform 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-duration: 4s

 <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 transform -webkit-transform color;
    -webkit-transition-duration: 4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 4s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    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 transform -webkit-transform color;
    -webkit-transition-duration: 4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 4s;
    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
Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство функций времени может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда Easing Functions Cheat Sheet.

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: 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-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);
transition-delay
Определяет как много должно пройти времени, перед тем как начнётся переход.

transition-delay: 0.5s

 <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-delay: 0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 0.5s;
    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-delay: 0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 0.5s;
    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-delay: 1s

 <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-delay: 1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 1s;
    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-delay: 1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 1s;
    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-delay: 2s

 <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-delay: 2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 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-delay: 2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 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-delay: 4s

 <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-delay: 4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 4s;
    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-delay: 4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 4s;
    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);

Короткая запись синтаксиса:

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Определение завершения перехода

Есть событие, срабатывающее, когда переход завершен. Во всех совместимых со стандартамибраузерами есть событие transitionend, в WebKit есть webkitTransitionEnd. Смотрите таблицу поддержки браузерами для дополнительной информации. У transitionend есть 2 свойства:

propertyName
Строка, показывающая изменение какого свойства завершено.
elapsedTime
Число с точкой, какое количество времени переход выполнялся, до того как запустилось событие. Это значение не равно свойству transition-delay.

Как обычно, используйте метод element.addEventListener(), чтоб следить за этим событием:

el.addEventListener("transitionend", updateTransition, true);
Замечание: Событие transitionend не произойдёт, когда переход был прерван до его завершения, например, если установили display: none или значение анимируемого свойства изменилось.

Когда у списков значений свойств разные длины

Если любой список свойств короче, чем другие, его значения повторяюся, чтобы сделать его длину как и у других. Например:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

Это рассматривается как если бы это было:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

Похожим образом, если какой-то список свойств длиннее, чем у transition-property, он обрезается:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

Будет интерпретировано как:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

Простой пример

Пример 4 секунды выполняет плавное измение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:

#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}

Использование переходов для подсвечивания меню

Они часто используются для подсвечения элементов в меню при наведении мыши. С помощью переходов легко сделать такой эффект более привлекательным.

Перед тем, как вы посмотрите на код, возможно захотите посмотреть на живое демо (считаем, что ваш браузер поддерживает переходы). Также можеть посмотреть на CSS, используемый этим примером.

Сначала зададим меню в HTML:

<div class="sidebar">
  <p><a class="menuButton" href="home">Home</a></p>
  <p><a class="menuButton" href="about">About</a></p>
  <p><a class="menuButton" href="contact">Contact Us</a></p>
  <p><a class="menuButton" href="links">Links</a></p>
</div>

Теперь напишем CSS для нашего меню:

.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}

Этот CSS устанавливает внешний вид меню, с фоном и цветом текста, изменяющимися при наведении (:hover).

Вместо описания эффекта можете посмотреть на живой пример, если ваш браузер поддерживает переходы.

Использование переходов, чтобы сделать JavaScript функциональность плавной

Переходы - крутая вещь, чтоб сделать вид вещей плавней, без надобности что-то делать в вашей JS функциональности. Зацените следующий пример:

<p>Кликните куда-нибудь, чтобы подвинуть шар</p>
<div id="foo"></div>

Используя JavaScript, добиваемся эффекта перемещения шара на определенную позицию:

var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
},false);

C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое измение свойств происходит плавно:

p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

Можете поиграть с этим здесь: http://jsfiddle.net/9h261pzo/291/

Спецификации

Спецификация Статус Комментарий
CSS Transitions Рабочий черновик Изначальное определение

Поддержка браузерами

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка 1.0 -webkit
26.0		 4.0 (2.0) -moz
16.0 (16.0)		 10 10.5 -o
12.10		 3.2 -webkit
Событие transitionend 1.0[1]
26.0		 4.0 (2.0) 10 10.5[2]
12
12.10		 3.2[1]
6.0
Возможность Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка 2.1 4.0 (2.0) -moz
16.0 (16.0)		 10 10 -o
12.10		 3.2
Событие transitionend 2.1[1] 4.0 (2.0) 10 10[2]
12
12.10		 3.2[1]

[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестрандартное событие  webkitTransitionEnd. Chrome 26.0 и WebKit 6.0 придерживаются стандарта transitionend.

[2] Opera 10.5 и Opera Mobile 10 поддерживают oTransitionEnd, версия 12 понимает otransitionend, а версия 12.10 знает стандарт transitionend.

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: ldolohov, TicTacVengria, agoge, BychekRU
 Обновлялась последний раз: ldolohov,