Простая анимация на CSS
Я решил поделиться простейшей анимацией на CSS + Javascript. Просто, стильно, удобно, универсально. У меня ей все сайты обсыпаны. Можно делать выплывающие элементы, появляющиеся кнопки и вообще что угодно.
Например, появляющийся по нажатию тескт:
Пишем в стилях:
#text{
opacity: 1; // Прозрачность 1
-webkit-transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transition: opacity 0.7s;}
Скрипт (меняет прозрачность с 0 до 1):
document.getElementById
('text').style.opacity='0'; document.getElementById
('text').style.opacity='1';
И все! Скрипт можно вызывать onclick или как-то еще. Применяется к элементу с id="text". Между 1 и 2 строкой можно показать сам, например, скрытый элемент с ID text.
Кстати, чтобы сработало в Гугл Хром, 2 строка скрипта должна быть с таймером: setTimeout("document.getElementById
Где посмотреть? Например, сверху справа у меня на dikij.com есть кнопки поиска и добавить в избранное. При наведении на хих формы выводятся с такой вот анимацией задержки. Также, выезжающее слева меню и цитата наверху справа. Ну и разворачивающиеся фреймы. Все это работает на такой вот анимации. Я только меняю длительность и webkit-transition: opacity на другие анимируемые свойства.
