CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Всё крутится и летает

Я занимался сексом с webkit-transition, результат можно увидеть тут, да и тут впрочем тоже, а вот что придумал Genn узнав об этом (примеры работают пока только в Хроме и Сафари).

Дальше будет немного теории, можно сразу перейти к примерам внизу.

transition transform

Если вам совсем нечего делать, можно прочитать о них в спецификации про 2d-transforms и про transitions. Это всё конечно draft, но вряд ли что-то изменится.

Вкратце всё обстоит так.

transform — совершает всякие странные эффекты с блоком. По сути похоже на text-transform, просто эффекты более странные.
Например можно писать так:

1. .weirdblock{
2. transform: rotate(45deg) scale(2);
3. }

Был маленький и прямой, стал большой и кривой

Пока спецификация неактуальна, для Сафари и Хрома правило нужно писать с префиксом -webkit-. То есть вот так:

1. .weirdblock{
2. -webkit-transform: rotate(45deg) scale(2);
3. }

transition — определяет анимацию блока. Используется примерно так:

1. div{
2. opacity:0.5;
3. -webkit-transition: opacity 1s linear; /*opacity - что анимируем,1s - длительность эффекта, linear - плавность эффекта*/
4. }
5. div:hover{
6. opacity:1;
7. }

1. a{
2. color:green;
3. -webkit-transition:all 1s linear;
4. }
5. a:hover{
6. color:red;
7. }

Примеры (пока только для Safari и Chrome)

Первое что пришло в голову, сделать анимированный комикс ;) Вот что получилось, выглядит странно, но он целиком сделан на CSS! Подумать только!

Дальше, еще интересней, я решил анимировать слова. А потом, конечно, это случилось и с буквами. :) Удивительно в этом то, что эту анимацию совершают всего 3-4 строки CSS-кода. (ну и джаваскрипт который предварительно раскидывает буквы по всему экрану, но это его единственная задача)

Если добавить изменение размера, получается забавно. А потом их можно еще и крутить ;), тогда они похожи на муравьёв. Но с двумя лимериками уже начинает тормозить.

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

Genn сделал ASCII трибьют, и еще один, не менее клёвый. Еще один прекрасный с отложенной анимацией (-webkit-transition-delay). И синяя лужа.

Может и у вас есть варианты? :)

Если у вас вдруг нет ни Сафари ни Хрома, вот видео пары анимаций:

Opera & Firefox

Мне известно только два, не совсем бесполезных варианта использования этих свойств, вот здесь в правой колонке внизу и вот тут смешно крутятся диски. Но, учитывая скорую поддержку Оперы и Фаерфокса, можно придумать что-то интересное =)

Все примеры

• Комикс на CSS
• Трибьют от Genn и второй, а также суперкрутой третий, и ошеломляющий четвертый
• Крутящиеся буквы, буквы которые засасывает и поворачивающиеся буквы, и еще неудачный вариант
• Аналоговые часы с помощью transition

Ваш арт по теме и мнение более чем приветствуется! :)

P.S.: Лимерики взяты из журнала Трамвай,
автор Татьяна Петросян, остальные тут.