Реализуйте анимацию, как в демке ниже (клик на картинку):
Продолжительность анимации: 3 секунды.
Для анимации использовать CSS, по окончани вывести «ок».
Исходный документ: tutorial/browser/animation/flyjet-src/index.html.
Анимируйте одновременно свойства left/top и width/height.
Чтобы в процессе анимации таблица сохраняла геометрию — создайте на месте IMG временный DIV фиксированного размера и переместите IMG внутрь него. После анимации можно вернуть как было.
Для начала анимации - добавьте класс изображению:
.growing {
/* все свойства анимируются 3 секунды */
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
}
При этом, чтобы анимация началась, может понадобиться отложить установку класса и новых свойств через setTimeout(.., 0).
Для отлова конца анимации используйте событие on<browser>TransitionEnd. Оно сработает несколько раз, для каждого свойства, поэтому чтобы обработчик не вывел «OK» много раз — можно обрабатывать окончание только при одном event.propertyName.