Сегодня мы решили сами написать статью, поскольку не нашли в иностранных блогах ту, что нам хотелось бы вам показать.
Мы расскажем об анимации CSS3. Проект ещё находится на стадии разработки, однако возможности впечатляют.
На сайте проекта примеры использования показываются на квадрате 100*100 с закруглёнными углами. Эффекты анимации чем-то напоминают анимацию смены слайдов в PowerPoint. На данный момент есть 24 варианта: 6 групп по 4 эффекта, включающие себя повороты влево-вправо, открытие и закрытие, обороты вокруг свой оси, плавные отъезды в сторону.
Ну, лучше один раз увидеть, как говорится…
Что касается использования в коде, то всё очень просто.
Для начала необходимо скачать файлик magic.css (upd. файл уже не доступен), который содержит 720 строк.
Затем в шапке подключить этот файл:
<link rel="stylesheet" href="yourpath/magic.css">
Далее пример кода на jQuery, который будет использоваться при наведении мыши. Вначале вы указывает класс, а затем название анимации.
$('.meta-thumb').hover(function () {
$(this).addClass('magictime puffIn');
});
Можно также изменить время анимации, использовав класс magictime, к примеру:
.magictime {
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
По умолчанию время установлено такое:
.magictime {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
Вот, собственно, и всё. Надеемся, вам это пригодится!
