Как на JavaScript сделать анимацию (скриншоты в топике)?

Question

[krlljs]

Как на JavaScript сделать анимацию? Например первый слайд (снимок) (нулевой):


Второй слайд (снимок), где два блочных элемента расходятся в стороны:


Нужна любого рода информация:
- Существующие примеры из книг;
- Примеры из ваших работ;
- Примеры из головы.
- Пример, оформленный на cssdeck.com/labs с помощью режима записи, и тд.

Предостережение: Если захотите назвать JQuery, то зря не утруждайте себя, -не называть его.

Хочу узнать, как нативным способом решить задачу...

Comments

[krlljs]

У Вас указана метка HTML5.
С помощью CSS3 эта задача решается легко, или нужно решение на JavaScript?

@Satanpit решение на CSS не будет лишним

[krlljs]

У Вас указана метка HTML5.
С помощью CSS3 эта задача решается легко, или нужно решение на JavaScript?

@Satanpit почему на JavaScript, а не на CSS? Css не так уневерсален

Answer 1

[Юрий Лобанов]

jsfiddle.net/iiil/hTY26/2
На css3 + js, не устраивает? - Используйте jq. Думаю, что можно сделать на js и на тостере найдутся такие умельцы. Еще есть библиотеки для анимации или можете погуглить (предупреждаю, в основном там сцепка css3 + js) .
Но как сегодня писали в каком-то вопросе: для просящего помощи формулировка чересчур наглая :)

Comments

[Юрий Лобанов]

Написал без префиксов, будет нужно - сами добавите.

Answer 2

[Александр Хиренко]

Вот набросал примитивный пример на CSS3. Сейчас анимация срабатывает на :hover, примитивными манипуляциями классов на JS можно сделать на любое событие.
jsfiddle.net/MqGc7
Поставить на фон картинки и добавить нужные стили и все будет работать + добавить префиксы для разных браузеров, сейчас написано для webkit.

Answer 3

[Александр Хиренко]

У Вас указана метка HTML5.
С помощью CSS3 эта задача решается легко, или нужно решение на JavaScript?