10 930 Скрипты / Animation

Последовательность анимаций на CSS3


В уроке речь пойдёт о возможностях анимации CSS3. Поэкспериментируем с последовательно сменяющейся анимацией. Работать будет только в современных браузерах, но если не использовать на своих проектах это, то просто посмотреть, точно рекомендую. Напоминаю, что реализовано всё только с помощью CSS3.

Пример 1


Заметьте, что тут добавлена более длительная задержка, чтобы дать немного времени для загрузки изображения.

HTML

У первого примера будет несколько элементов, которые будем анимировать.

CSS

Основная идея этого примера - следующая последовательность анимаций:
  • Появление миниатюр.
  • Появление заголовка H1.
  • Потом появление подзоголовка H2.
  • Постепенно H1 и H2 исчезают.
  • Начинают последовательно и постепенно исчезать миниатюры и появляется второй заголовок H1 с помощью fadeInColor.
  • Также, контент перемещается влево и уменьшается в размерах (sizeDownMove).
  • Стрелка и контент скользят влево с помощью slideIn.
Отцентрируем основной контейнер и расположем контент абсолютно: 
.sp-container {     position: relative;     width: 1000px;     height: 600px;     margin: -40px auto 0 auto; } .sp-content {     position: absolute;     z-index: 100;     width: 800px;     height: 600px;     left: 0px;     top: 0px;     -webkit-animation: sizeDownMove 0.9s ease-in-out 6s backwards;     -moz-animation: sizeDownMove 0.9s ease-in-out 6s backwards;     -ms-animation: sizeDownMove 0.9s ease-in-out 6s backwards;     animation: sizeDownMove 0.9s ease-in-out 6s backwards;     -webkit-transform: scale(0.6);     -moz-transform: scale(0.6);     -o-transform: scale(0.6);     -ms-transform: scale(0.6);     transform: scale(0.6);     -webkit-transform-origin: 0% 50%;     -moz-transform-origin: 0% 50%;     -o-transform-origin: 0% 50%;     -ms-transform-origin: 0% 50%;     transform-origin: 0% 50%; } 
Как видно, мы применяем анимацию к контенту, который будет двигаться и масштабироваться, но только после истечения 6 секунд.

Стрелка также будет занимать абсолютное положение с фоновым изображением:
[code].sp-arrow {     background: transparent url(../images/arrow.png) no-repeat top left;     position: absolute;     top: 50%;     margin-top: -77px;     left: 82%;     width: 198px;     height: 155px;     -webkit-animation: slideIn 0.6s ease-in-out 6s backwards;     -moz-animation: slideIn 0.6s ease-in-out 6s backwards;     -ms-animation: slideIn 0.6s ease-in-out 6s backwards;     animation: slideIn 0.6s ease-in-out 6s backwards;     z-index: 100; }С правой стороны поместим элемент с формой ввода электронной почты: 
.sp-side {
    width: 460px;
    height: 300px;
    position: absolute;
    right: 10px;
    top: 25%;
    -webkit-animation: slideIn 0.6s ease-in-out 6s backwards;
    -moz-animation: slideIn 0.6s ease-in-out 6s backwards;
    -ms-animation: slideIn 0.6s ease-in-out 6s backwards;
    animation: slideIn 0.6s ease-in-out 6s backwards;
}
Оформим заголовок: 
.sp-side h2 {
    font-size: 70px;
    padding: 20px 0px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    font-family: 'Unlock', Arial, sans-serif;
}
... и область ввода с текстом и кнопкой:
Стилизуем заголовок, который анимируем и покажем первым, затем уберем его с плавным исчезновением: 
.sp-content h1:first-child {
    font-size: 100px;
    text-align: center;
    color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    line-height: 80px;
    padding: 30px 0px 20px 0px;
    font-family: 'Unlock', Arial, sans-serif;
    -webkit-animation: fromBack 1.2s ease-in-out 1.5s backwards, fadeOut 0.5s linear 4.5s forwards;
    -moz-animation: fromBack 0.6s ease-in-out 1.5s backwards, fadeOut 0.5s linear 4.5s forwards;
    -ms-animation: fromBack 1.2s ease-in-out 1.5s backwards, fadeOut 0.5s linear 4.5s forwards;
    animation: fromBack 1.2s ease-in-out 1.5s backwards, fadeOut 0.5s linear 4.5s forwards;
}
Второй заголовок будет только исчезать, после первого:
Подзаголовок, будет похож на первый H1, будет появляться и исчезать: 
.sp-content h2 {
    font-size: 36px;
    text-align: center;
    color: #518f7e;
    font-family: 'Cookie', serif;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-animation: fromBack 0.6s ease-in-out 2.6s backwards, fadeOut 0.5s linear 4.5s backwards;
    -moz-animation: fromBack 0.6s ease-in-out 2.6s backwards, fadeOut 0.5s linear 4.5s backwards;
    -ms-animation: fromBack 0.6s ease-in-out 2.6s backwards, fadeOut 0.5s linear 4.5s backwards;
    animation: fromBack 0.6s ease-in-out 2.6s backwards, fadeOut 0.5s linear 4.5s backwards;
}
Стилизуем строки для миниатюр: 
.sp-content-row {
    width: 466px;
    height: 300px;
    float: left;
}
.sp-side-row {
    width: 150px;
    float: left;
}
.sp-row img {
    display: block;
    z-index: 1000;
    position: relative;
}
К каждому SPAN с миниатюрами будет применено масштабирование от 0 до 1 и позже исчезновение: 
.sp-row span {
    position: relative;
    float: left;
    margin: 2px;
    z-index: 100;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-animation: fromBack 0.4s linear backwards, fadeOut 0.3s linear backwards;
    -moz-animation: fromBack 0.4s linear backwards, fadeOut 0.3s linear backwards;
    -ms-animation: fromBack 0.4s linear backwards, fadeOut 0.3s linear backwards;
    animation: fromBack 0.4s linear backwards, fadeOut 0.3s linear backwards;
}
Мы хотим создать последовательность, где каждая следующая миниатюра появляется и исчезает с задержкой. Будем брать каждую строчку и определять задержки каждого дочернего SPAN элемента. Четвертая строчка на правой стороне, за счет этого мы будем двигаться по часовой стрелке:
Создадим небольшой псевдо-элемент, чтобы декорировать миниатюры фоном в виде круга: 
.sp-row span:before {
    content: '';
    position: absolute;
    background: #fff;
    background-color: rgba(255,255,255,0.3);
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
Теперь взглянем на анимацию.
Первая анимация это простое fade out исчезновение с изменением прозрачности от 1 до 0: 
@keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
fadeInColor - постепенное появление элемента с установкой фона в цвете RGBA. Уровень прозрачности RGBA будет 0, тогда, как прозрачность самого элемента достигнет 0.5. Контент элемента показывается первее, чем фон. Это будет использоваться для второго заголовка:
@keyframes fadeInColor{
    0%{
        opacity: 0;
        background-color: rgba(255,255,255,0);
    }
    50%{
        opacity: 0.5;
        background-color: rgba(255,255,255,0);
    }
    100%{
        opacity: 1;
        background-color: rgba(255,255,255,0.3);
    }
}
Следующая анимация просто заставляет элемент скользить и появиться с левой стороны: 
@keyframes slideIn{
    0%{
        opacity: 0;
        transform: translateX(-200px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}
sizeDownMove - уменьшит масштаб элемента и переместит его из положения left:100px в left:0px.
@keyframes sizeDownMove{
    0%{
        transform: scale(1);
        left: 100px;
    }
    100%{
        transform: scale(0.6);
        left: 0px;
    }
}

Следующая анимация заставит элемент появляться, как бы с зади, со спины (fromBack), масштабируя его от 0 до 1 и изменяя прозрачность от 0 до 1:

@keyframes fromBack{
    0%{
        transform: scale(0);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

Пример 2

HTML

Снова у нас будет контейнер с несколькими фреймами, земным шаром на заднем плане и ссылкой, которая появится в самом конце: 
<div class="sp-container">
    <div class="sp-content">
        <div class="sp-globe"></div>
        <h2 class="frame-1">Это уничтожает планету</h2>
        <h2 class="frame-2">Это нарушает баланс</h2>
        <h2 class="frame-3">Вы можете остановить это</h2>
        <h2 class="frame-4">Сейчас!</h2>
        <h2 class="frame-5"><span>Спасём планету.</span> <span>Любите жизнь.</span> <span>Присоединяйтесь</span></h2>
        <a class="sp-circle-link" href="index2.html">К нам!</a>
    </div>
</div>

CSS

Каждый заголовок будет центрироваться на экране и появляться и исчезать с помощью анимации blurFadeInOut: 
.sp-container h2 {
    position: absolute;
    top: 50%;
    line-height: 100px;
    height: 100px;
    margin-top: -50px;
    font-size: 100px;
    width: 100%;
    text-align: center;
    color: transparent;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
    -moz-animation: blurFadeInOut 3s ease-in backwards;
    -ms-animation: blurFadeInOut 3s ease-in backwards;
    animation: blurFadeInOut 3s ease-in backwards;
}
Определим задержки времени для каждого заголовка:
У последнего заголовка не будет непосредственно самой анимации, но будут анимированы его элементы, фразы последовательно:
Земной шар - элемент с абсолютным позиционированием и фоновым изображением. Постепенно проявится после 14 секунд показа всех предыдущих анимаций с эффектом масштабирования, чтобы занять всю область контента:
Ссылка появляющаяся в самом конце - "К нам!" - будет круглой формы с вращением при появлении:
А теперь посмотрим на все анимации:
Первая анимация для всех заголовков, которые будут появляться и исчезать. Моделируется эффект размытости за счет игры с текстовыми тенями и масштабом: 
@keyframes blurFadeInOut{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }
    20%,75%{
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        transform: scale(0);
    }
}
Следующая анимация, почти тоже самое, но текст не будет исчезать (это для последнего заголовка): 
@keyframes blurFadeIn{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }
    50%{
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        transform: scale(1.1);
    }
    100%{
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }
}
У земного шара будет анимация, которая увеличивает масштаб элемента и сначала увеличивает, а затем уменьшает его прозрачность: 
@keyframes fadeInBack{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    50%{
        opacity: 0.4;
        transform: scale(2);
    }
    100%{
        opacity: 0.2;
        transform: scale(5);
    }
}
И анимация для ссылки. Постепенное появление одновременно с вращением:
@keyframes fadeInRotate{
    0%{
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
    100%{
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

Пример 3


В третьем примере по экспериментируем с движениями текста для представления какого-нибудь приложения, изделия или продукта. В конце всех анимаций появится элемент призыва к действию, например зарегистрироваться на сайте.

HTML

Примечание: Данный пример не переводил, так как нужно было бы подбирать кирилические шрифты, чтобы они не выходили за границы.
У нас будут два контейнера и ещё два внутри для левой и правой стороны (для разделения экрана на две части):

CSS

В начале анимируем область контента с псевдо-элементом, представляющей из себя вертикальную линию по середине. При загрузке, линия увеличится. Затем покажем текст с левой стороны, последовательно выдвигающийся с правой и текст с правой стороны, который последовательно выдвигается слева на право. У SPAN с классом "sp-mid" будет крупный размер шрифта и эти элементы будут показываться и после постепенного исчезновения остального текста. Два текста с крупным шрифтом переместим вверх и сожмем область контента, то есть уменьшим её высоту, что заставит уменьшиться и вертикальную линию. После этого покажем текст и кнопку со ссылкой.

У контейнера будет фиксированная ширина и высота: 
.sp-container {
    width: 900px;
    height: 400px;
    position: relative;
    margin: 80px auto 0px auto;
}
.sp-content {
    width: 100%;
    height: 400px;
    position: relative;
    -webkit-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
    -moz-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
    -ms-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
    animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
}
Линия по середине, созданная псевдо-элементом 
.sp-content:after {
    content: '';
    width: 4px;
    background: #000;
    height: 100%;
    position: absolute;
    left: 50%;
}
Обёртки для заголовков не будут показывать переполнения (overflow), так мы не увидим наложения, когда двигаем их: 
.sp-wrap {
    width: 400px;
    padding: 0px 25px;
    height: 100%;
    text-align: right;
    font-size: 70px;
    line-height: 80px;
    float: left;
    position: relative;
    background: #ffdd00;
    overflow: hidden;
}
Элементы H2 с тегом SPAN внутри имеют следующие стили:
Класс "sp-top" и "sp-bottom" будут двигаться справа налево и затем исчезнут, и "sp-mid" переместится вверх: 
.sp-left span.sp-top {
    -webkit-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
    -moz-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
    -ms-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
    animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
}
.sp-left span.sp-mid {
    -webkit-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
    -moz-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
    -ms-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
    animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
}
.sp-left span.sp-bottom {
    -webkit-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
    -moz-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
    -ms-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
    animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
}
В правой части будет происходить тоже самое, только слева направо:
Вопросительный знак будет поверх восклицательного знака, и когда мы перемещали два средних SPAN элемента вверх, вопросительный знак исчезнет, чтобы проявить восклицательный знак: 
.sp-wrap i {
    position: absolute;
    background: #ffdd00;
    width: 60px;
}
.sp-wrap i:first-child {
    color: #000;
}
.sp-wrap i:last-child {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-animation: fadeOut 1s linear 6s backwards;
    -moz-animation: fadeOut 1s linear 6s backwards;
    -ms-animation: fadeOut 1s linear 6s backwards;
    animation: fadeOut 1s linear 6s backwards;
}
Текст появляющийся в конце обернут "sp-full" - сделаем так, чтобы он постепенно появился и увеличился масштаб для ссылки:
Теперь посмотрим на анимацию:
Первая анимация для "открытия" области контента, тут просто масштабируется высота: 
@keyframes open{
    0%{
        transform: scale(1,0);
    }
    100%{
        transform: scale(1,1);
    }
}
Анимация сжатия, хотя в нашем случае мы ничего не сжимаем, так как не используем тут масштабирующие свойства, мы просто уменьшаем высоту: 
@keyframes squeeze{
    0%{
        height: 400px;
    }
    100%{
        height: 120px;
    }
}
Следующие две анимации для постепенно появляющихся элементов: 
@keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
А эти две анимации переместят элемент от одной стороны к другой: 
@keyframes slideLeft{
    0%{
        transform: translateX(120%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes slideRight{
    0%{
        transform: translateX(-120%);
    }
    100%{
        transform: translateX(0%);
    }
}
moveUp - переместит элемент вверх: 
@keyframes moveUp{
    0%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(-170px);
    }
}

И ZoomIn - увеличит масштаб от 0 до 1:
@keyframes zoomIn{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
Скачать 943Загрузок 532,66 Kb
Демо
Ссылки

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи

Xoverlay - CSS3 эффекты наведения
Animation
Эффекты при наведении для блоков с заголовками
Animation
Необычные эффекты при наведении
Animation
CSS3 анимация звездного ночного неба
Animation
CSS3 эффекты при наведении
Animation