уменьшение объекта до заданного значения через CSS3

[simple]

понятно, а как тогда через ширину/высоту? Извиняюсь голова уже не думает, спать охота хотя в принципе ие меня мало волнует, пишу приложения специал фор хроме и ко.

Ага, прочел ваш последний пост, ситуация прояснилась, спасибо еще раз за помощь!

[simple]

cyber, сделал трансформацию свертывания по свойствам top/left и width/height как вы и советовали, действительно теперь ещь проще стало. Но вот отлов завершения анимации у меня что то не корректно работает, вешаю на елемент событие 'transitionend' но обработчик на событие почемуто срабатывает несколько раз, в моем случае 5 раз, как сделать чтобы срабатывало один раз?

[cyber]

simple, если вы сделали через top/left и width/height , то почему вы ловите 'transitionend?
и желательно бы код показать..

[simple]

анимация делается ведь через transition, вот я и вешаю на него ивента и больше я пока незнаю способов. Есть еще какой то способ отлова события завершения? Буду благодарен за помошь. Флаг завершения мне нужен чтобы подменять аватар окна на оригинал когда свертывание анимации завершится, и.т.д. Вот код:

.window {
  position:absolute;
  top:50px;
  left:350px;
  width:580px;
  height:300px;
  background-color:#ecf2fb;
  opacity:1;
  -webkit-transition:all 0.3s ease-in;
}
.minimize {
  -webkit-transition:all 0.3s ease-out;
  opacity:0.5;
top: // переменная
left: // переменная
  width:158px;
  height:27px;
//константа
}

<a onclick="minimize()">Свернуть</a>
<div class="window"></div>
var avatar = document.querySelector('.window');
avatar.addEventListener('transitionend', function () {
   console.log('finish');}, true); // это в консоль выводится 5 раз почему то 
  function minimize() {
      avatar.className = 'window minimize'
};
function restore() {
    avatar.className = 'window';
};

[simple]

я понял почему хандлер вызывается 5 раз, ивент transitionend срабатывает при каждом переходе свойств которые применяются для анимации и описанны в transition-property:, у меня стоит all, т.е все свойства класса, при завершении анимации идет проход по ним, это top, left, width, height,opacity и того 5 переходов. Как же тогда реализовать данный эффект но с одним переходом, понимаю что это невозможно...но как тогда быть? или надо в другую сторону копать. Запутался что то уже.

Да и если маштабирование и передвижение делать через scale и transate то тогда да имеем 1 переход и 1 срабатывание хандлера...ладно с координатами в translate не трудно, но как быть с маштабированием, мне нужен конечный размер свернутого окна 158х27, без бордюров, как можно это расчитать учитывая то что развернутое окно может быть любых размеров? Хелп ми люди!

[simple]

мда...сложновато, оказалось все наоборот, масштаб легко вычисляется надо кон.размер / нач.размер, а вот движение в перспективе трудней координаты вычислить...ладно черт с ним с этим transitionend буду по старинке через setTimeout синхронизировать.

[cyber]

simple, не совсем понял в чем трудности)

[simple]

да как выяснилось... во всем ) не получается что то у меня программно анимацией управлять...на простых примерах вроде работает, а как непосредственно к приложению данный функционал прикрутил так началось сразу...во первых не получается обратится к свойству transform из js, пробовал так style.webkitTransform и так style.WebkitTranform, не видит его и все. И еще стартовать анимацию из js с заданными координатами у мну все равно не выходит, хотя наверное я криво подхожу к задаче...на примере я стартовал анимация добалением класса элементу, а на практике не получается передать в этот класс полученные координаты чтобы анимация запустилась как надо.

[cyber]

simple, эм, что сложного то

param.object.style.WebkitTransform = "scale("+scale+")";

пробуйте, вылаживайте код (желательно так что бы можно было запустить) )

[simple]

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