Анимация в CSS3 при помощи ключевых кадров
CSS3 позволяет создавать крутые анимационные эффекты без использования JavaScript-фреймворков. CSS3 и HTML5 делают простым то, что раньше было сложным. В этой статье я расскажу, как максимально просто реализовать анимацию в CSS3.
Используйте приведённые мной примеры, чтобы визуально обогатить ваши интернет-проекты. Посмотрите приведенные ниже демо-версии в любом современном браузере: Google Chrome, Firefox или Safari. Уверен, эти эффекты вам понравятся:
Загрузить код
Пример 1
Пример 2
Пример 3
CSS: Ключевые кадры
Таким способом я меняю значение прозрачности в зависимости от процентных селекторов в CSS-правиле ключевых кадров:
<style>
@keyframes flashEffect
{
0%, 50%, 100%
{
opacity: 1;
}
25%, 75%
{
opacity: 0;
}
}
//Webkit for Safari and Chrome browsers
@-webkit-keyframes flashEffect
{
0%, 50%, 100%
{
opacity: 1;
}
25%, 75%
{
opacity: 0;
}
}
.flash
{
animation:flashEffect 1s infinite;
-webkit-animation:flashEffect 1s infinite; /* Safari and Chrome */
text-shadow: 2px 2px 8px #FFFFFF; /* Blur effect */
}
</style>Другие эффекты, применимые к тексту, смотрите в моей предыдущей статье «Текстовые эффекты CSS».
Пример эффекта вспышки
Код HTML5
CSS3 может взаимодействовать с тэгом HTML5 , наличие которого говорит браузеру о том, что тот может обрабатывать документ продвинутым способом. Например, отрендерить CSS-стиль, размещённый внутри тэга <head>.
<!doctype html>
<html lang="en">
<head>
<title>Page Title</title>
//Include style here
</head>
<body>
<div class="flash">
9lessons Programming Blog
</div>
</body>
</html>Animation.css
Этот файл содержит комбинацию CSS-эффектов, собранную Дэниелом Иденом (Daniel Eden). Вы можете загрузить последнюю версию файла здесь, а если торопитесь – просто скопируйте текст отсюда:
<!doctype html>
<html lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" href="animate.css"/>
<style>
.effectTada
{
animation:tada 1s infinite;
-webkit-animation:tada 1s infinite; /* Safari and Chrome */
}
.effectBounce
{
animation:bounce 1s infinite;
-webkit-animation:bounce 1s infinite; /* Safari and Chrome */
}
.effectSwing
{
animation:swing 1s infinite;
-webkit-animation:swing 1s infinite; /* Safari and Chrome */
}
</style>
</head>
<body>
<img src="image1.png" class="effectSwing" />
<img src="image2.png" class="effectTada" />
<img src="image3.png" class="effectBounce" />
</body>
</html>Пример анимированных изображений
Код jQuery для удаления записей
Этот пример содержит некоторое количество JavaScript-кода. Класс stdelete применяется к тэгу, обрамляющему «крестик». $(this).parent().parent() позволяет обратиться к верхнему контейнеру в иерархии DOM.
Если хотите получить представление об AJAX-реализации подобного эффекта, взгляните на другую нашу статью:
<link rel="stylesheet" href="animate.css"/>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(".stdelete").click(function()
{
var A=$(this).parent().parent();
A.addClass("effectHinge"); //Applying style
A.delay(500).fadeOut("slow",function()
{
$(this).remove();
});
});
});
</script>Пример статусного сообщения
HTML код
Вот так можно с лёгкостью реализовать статусные сообщения при помощи CSS:
<div class="stbody">
<div class="sttext"><span class="stdelete">X</span>
9lessons Programming Blog
</div>
</div>