Анимация в CSS3 при помощи ключевых кадров

2014-06-24 0 ∞

CSS3 позволяет создавать крутые анимационные эффекты без использования JavaScript-фреймворков. CSS3 и HTML5 делают простым то, что раньше было сложным. В этой статье я расскажу, как максимально просто реализовать анимацию в CSS3.

Используйте приведённые мной примеры, чтобы визуально обогатить ваши интернет-проекты. Посмотрите приведенные ниже демо-версии в любом современном браузере: Google Chrome, Firefox или Safari. Уверен, эти эффекты вам понравятся:

Загрузить код

CSS: Ключевые кадры

Пример 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>