Анимация CSS: примеры

Опубликовано: 01.09.2018

В создание анимации можно не только ограничиваться специальными программами, а и использовать возможности каскадной таблицы CSS3. Опираясь на знания и свою фантазию вырисовывать эффекты в CSS анимации без использования каких-либо дополнений. Тем более CSS анимация — это хороший способ произвести впечатления на своих пользователей при правильном ее размещении. С помощью анимации CSS можно заставить шевелиться практически все, текст, картинку, произвольные фигуры и все остальное что придет на ум.

В статье постараемся подробнее ознакомиться с возможностями анимации и ее применениями. А также приведем несколько интересных примеров с различными эффектами.

CSS3 Анимация

Поддержка браузеров.

Для поддержки анимации всеми популярными браузерами применяется нестандартное свойство, префикс. Оно обозначается в начале строки каждому браузеру в отдельности.

Уроки Front end | Анимация SVG

Internet Explorer 10 поддерживает без префикса. Браузер Опера распознает префикс –webkit поэтому значение -o- можно не применять.

Начальный кадр анимации.

С помощью свойства @keyframes создается начальный кадр анимации, который необходимо привязать к определенному селектору. Затем указать по крайней мере два действия:

— название анимации

— продолжительность анимации

Пример.

HTML

CSS

div.classs2 { width: 100px; height: 100px; background: red; -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ animation: myfirst 5s; margin-bottom:20px; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } /* Standard syntax */ @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }

Примечание: Если не указана продолжительность анимации, то никаких действий не произойдёт поскольку по умолчание она равна нулю.

Как работает CSS анимация?

Анимация дает возможность переходить с одного стиля на другой при этом плавно их меняя. Изменить можно многие элементы, а главное – неоднократно, столько раз сколько нужно. Переход анимации указывается в процентах от 0% до 100% или же ключевыми словами от «from» до «to».

Пример.

HTML

CSS

div.classs { width: 100px; height: 100px; background: red; -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ animation: myfirst 5s; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from {background: red;} to {background: yellow;} } /* Standard syntax */ @keyframes myfirst { from {background: red;} to {background: yellow;} }

Примеры анимации в логотипе.

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

Другие примеры анимации

Где еще можно применить анимацию? Да где угодно, анимация способна двигать многие веб-элементы: меню, ссылки, обычный текст и т.д. Действия практически неограниченные, даже с помощью анимации возможно заменить некоторые javascript`ы.

HTML

<div class="box"> <p class="text animated rubberBand">WORDSMALL</p> </div>

CSS

.box { width: 160px; height: 60px; background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #333; margin:30px auto; } .text { text-align: center; margin-top: 20px; color: #F47C0A; font-size: 1.0em; font-family: sans-serif; text-transform: uppercase; } .animated:hover { animation-duration: 2.5s; animation-fill-mode: both; animation-iteration-count: infinite; cursor:pointer; } @keyframes rubberBand { 0% {transform: scale(1);} 30% {transform: scaleX(1.15) scaleY(0.75);} 40% {transform: scaleX(0.75) scaleY(1.25);} 60% {transform: scaleX(1.15) scaleY(0.85);} 100% {transform: scale(1);} } p.rubberBand { animation-name: rubberBand; }

HTML

<div class="box"> <p class="text2 animated wobble">Animated</p> </div>

CSS

.box { width: 160px; height: 60px; background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #333; margin:30px auto; } @keyframes wobble { 0% {transform: translateX(0%);} 15% {transform: translateX(-25%) rotate(-5deg);} 30% {transform: translateX(20%) rotate(3deg);} 45% {transform: translateX(-15%) rotate(-3deg);} 60% {transform: translateX(10%) rotate(2deg);} 75% {transform: translateX(-5%) rotate(-1deg);} 100% {transform: translateX(0%);} } p.wobble { animation-name: wobble; } .text2 { text-align: center; margin-top: 20px; color: #39C72F; font-size: 1.0em; font-family: sans-serif; text-transform: uppercase; }

HTML

CSS

.box { width: 160px; height: 60px; background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #333; margin:30px auto; } .animated.flip { backface-visibility: visible; animation-name: flip; } @keyframes lightSpeedIn { 0% {transform: translateX(100%) skewX(-30deg);opacity: 0;} 60% {transform: translateX(-20%) skewX(30deg);opacity: 1;} 80% {transform: translateX(0%) skewX(-15deg);opacity: 1;} 100% {transform: translateX(0%) skewX(0deg);opacity: 1;} } .text3 { text-align: center; margin-top: 20px; color: #7389F6; font-size: 1.0em; font-family: sans-serif; text-transform: uppercase; } @keyframes flip { 0% {transform: perspective(400px) translateZ(0) rotateY(0) scale(1);animation-timing-function: ease-out;} 40% {transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);animation-timing-function: ease-out;} 50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;} 80% {transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);animation-timing-function: ease-in;} 100% {transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);animation-timing-function: ease-in;} }

HTML

<div class="box"> <p class="text4 animated flash">Animated</p> </div>

CSS

.box { width: 160px; height: 60px; background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #333; margin:30px auto; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } .text4 { text-align: center; margin-top: 20px; color: #F6564D; font-size: 1.0em; font-family: sans-serif; text-transform: uppercase; }

Больше примеров анимации текста можно найти .

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

Источник: w3schools.com/css/css3_animations.asp