Просмотров: 42585

Как сделать анимацию для html


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

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

CSS3Анимация

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

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

Браузер Explorer Chrome Firefox Safari Opera Версия 10.0 4.0 16.0 4.0 15.0 animation — -webkit- -moz- -webkit- -webkit-

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

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

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

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

Пример.

HTML

<div class="classs2"></div>

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

<div class="classs"></div>

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;} }

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

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

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

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

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

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

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

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

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

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

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

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

WORDSMALL

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; }

Animated

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; }

Flip

HTML

<div class="box flipbox"> <div class="text3 animated flip">Flip</div> </div>

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;} }

Animated

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

Читайте также:
  1. Что такое абсолютные и относительные ссылки

    Что такое абсолютные и относительные ссылки

  2. Выравнивание текста по вертикали. 5 способов

    Выравнивание текста по вертикали. 5 способов

  3. Кнопки в стиле Material Design

    Кнопки в стиле Material Design

  4. Нумерованный список и примеры его оформления

    Нумерованный список и примеры его оформления


Источник: http://wordsmall.ru/html-i-css/animaciya-css-primery.html


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Простые анимация для сайта html : бегущая строка и падающий снег. Сделай Золотая рыбка из конфет своими руками пошаговое фото

Как сделать анимацию для html Как сделать анимацию для html Как сделать анимацию для html Как сделать анимацию для html Как сделать анимацию для html Как сделать анимацию для html Как сделать анимацию для html

ШОКИРУЮЩИЕ НОВОСТИ