Анимация на JS или CSS3?

#javascript #css3 #angularjs #css_animation

Есть вот такая анимация, пример на jsfiddle
С помощью

transform: rotate(Xdeg)


Поворачивается по оси квадрат.
В начале плавно появляется и плавно исчезает.  

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

Что должно получится:
Мы нажимаем на кнопку, скорость плавно уменьшается и примерно через 2 оборота все
блоки останавливаются.

Ради изменение скорости переделывать всю анимацию c CSS на JS?
И будет ли она такая же плавная на JS и как лучше сделать?
Так же через 

transform: rotate(Xdeg)


Или лучше высчитывать кординаты и писать их через:

left: Xpx;
top: Xpx;


Сайт где рассчитано это использовать написан с использованием фреймворка AngularJS.
Возможно для него есть какие-то библиотеки для реализации анимаций?
    

Ответы

Ответ 1

Решил сделать на JS, вот то что получилось:

Вот тут код

Так же через transform, но управление через JS, а не через анимацию CSS


Ответ 2

Нажимаем кнопку и все блоки плавно замедляются и останавливаются, на CSS я так понимаю
что это реализовать невозможно?


Неправильно понимаешь. Измени время анимации всё должно само замедлиться.

UPDATE: Я неправ, подумаю ещё.



body { padding: .5em; height: 100%; overflow: hidden; }
label  { cursor: pointer; }

input[type=checkbox] { display: none; }
#slow:checked ~ label[for=slow], #rotate:checked ~ label[for=rotate] { background:
silver; }
#slow:checked ~ div { transition-duration: 31.4s; }
#rotate:checked ~ div { transform: rotate(1turn); }

label {
  padding: .5em;
  border: 1px solid;
}

div {
  position: absolute;
  transform: rotate(0deg);
  transition: transform 3.14s linear, transition-duration 3.14s step-start;
  height: 50vmin;
  width: 50vmin;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: red;
}
Slow
Rotate