CSS3 анимация достаточно широко используется. Пришла пора разобраться даже самым начинающих сайтостроителям что же такое CSS анимация и как ее создать. Возможно Вы думаете что CSS3 анимация заключается в том, чтобы заставить двигаться блоки и это похоже на мультфильм. Но CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации. Чтобы это было понятно даже для начинающих — я расписал всё по шагам.
Небольшой теоретический блок, из которого Вы поймете какие свойства CSS3 отвечают за анимацию, а также какие значения они могут принимать.
Здесь находятся лишь основные свойства, которых более чем достаточно, чтобы создать свою первую анимацию на CSS3.
Последнее, что нам нужно знать и понимать из теории — это то, как создавать ключевые кадры. Это делать также легко и делается это с помощью правила @keyframes , внутри которого указываются ключевые кадры. Синтаксис этого правила следующий:
Выше мы задали первый и последний кадр. Все промежуточные состояния рассчитаются АВТОМАТИЧЕСКИ!
Теория как обычно скучна и не всегда понятна. Намного проще увидеть всё на реальном примере, а лучше всего сделать своими руками на какой-нибудь тестовой HTML страничке.
При изучении языка программирования обычно пишут программу "Hello, world!", по которой можно понять какой синтаксис у этого языка и еще какие-нибудь базовые вещи. Но мы изучаем не язык программирования, а язык описания внешнего вида документа. Поэтому у нас будет свой "Hello, world!".
Вот что мы сделаем для примера:
пусть у нас какой-нибудь блок Вроде бы всё понятно — просто нужно сжать блок Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице. А вот что находится в файле стилей: Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные "построились" автоматически. Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал. Выше Вы узнали как можно легко создать CSS3 анимацию. Если попробовали своими руками это сделать, то уже поняли весь процесс и сейчас хотите узнать как можно создать более сложную и красивую анимацию. А ее создать действительно можно. Ниже есть 3 урока где анимация создается также, как в примере выше. 3 урока по анимации CSS (преобразования) Уроки помогут Вам понять анимацию CSS еще лучше. Главное — это пробовать повторять то, что Вы видите в уроках. Или хотя бы попробуйте изменять значения свойств и смотреть что получается, тогда Вы станете меньше боятся CSS. Все чаще на многих landing page или промо-страничках, можно встретить различные эффекты анимации. Ведь они делают страницу более интересной и привлекательной. В основном эти эффекты задают либо на какое-то событие (клик или наведение на элемент), либо же в момент прокрутки страницы. Я думаю вы встречали такие сайты, когда прокручивая страницу, различные элементы плавно и красиво появляются. Раньше для реализации этих эффектов, приходилось использовать только лишь JS, но развитие не стоит на месте и с выходом CSS3 все эти эффекты можно реализовать на нем. В данном уроке мы с вами познакомимся с очень интересным инструментом под названием animate.css
. Это уже готовая CSS таблица стилей, которая в своем арсенале имеет свыше 50 различных эффектов и все эти эффекты реализованы на CSS3. Чтобы использовать ее, вам достаточно для требуемого элемента задать определенный класс и к этому элементу будет применен эффект анимации. Как я и говорил ранее, данная анимация реализована на CSS3, поэтому эти эффекты будут работать во всех современных браузерах. А теперь давайте более детально познакомимся с animate.css
. Смотреть видеоурок
Если вы все сделали, как описано выше, то в момент загрузки страницы для элемента будет применен данный эффект и все, анимация на этом закончится. Но что делать если вам нужно чтобы анимация продолжалась без остановки? Для этого достаточно добавить еще один класс для нашего анимируемого элемента. Это класс – infinite
. Задаем анимацию при наведении мыши на элемент Смотреть видеоурок
Все описанные ранее примеры, задают анимацию сразу же после загрузки страницы, но на практике это редко бывает нужно. На практике очень часто требуется задавать анимацию при наведении на элемент и поэтому ниже я привел готовый код данной реализации. HTML
разметка у нас немного поменялась, теперь нам не надо задавать класс, который отвечает за конкретную анимацию. Это значение нам нужно указывать в специальном атрибуте data-effect
. Обратите на это внимание, это очень важно. Вот небольшой код на jQuery
, который будет отслеживать событие наведения курсора мыши на элемент и в случае возникновения данного события, скрипт добавит к нему класс, значение которого прописано в атрибуте data-effect
. За счет добавления этого класса будет применена анимация. Function animate(elem){
var effect = elem.data("effect");
if(!effect || elem.hasClass(effect)) return false;
elem.addClass(effect);
setTimeout(function(){
elem.removeClass(effect);
}, 1000);
}
$(".animated").mouseenter(function() {
animate($(this));
});
Естественно данный скрипт вы можете изменить как угодно, к примеру, вы можете поменять в нем событие mouseenter
на click
. Тогда в этом случае анимация будет происходить не в момент наведения мыши на элемент, а в момент клика. Смотреть видеоурок
Ну и напоследок давайте разберем еще один пример, где вы с легкостью можете применять animate.css
. А именно вы можете задавать различные эффекты для элементов при прокрутке страницы. Для этих целей помимо animate.css
, нам потребуется еще специальный скрипт wow.js
. Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before
и :after
IE:
10.0 Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи: Правило @keyframes
позволяет создавать анимацию с помощью ключевых кадров - состояний объекта в определенный момент времени. Ключевые кадры анимации создаются с помощью ключевых слов from
и to
(эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если не задан начальный (from
, 0%) или конечный (to
, 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего. При определении анимации сразу после свойства @keyframes
должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован). @keyframes move {
from {
transform: translateX(0px);
}
50% {
transform: translateX(130px);
}
100% {
transform: translateX(0px);
}
} @keyframes move
{
from
{
50%
{
100%
{
transform
:
translateX
(0px
)
;
Мы создали анимацию, которая работает следующим образом: Здесь и далее для удобства я написал в примерах несколько строчек JavaScript, которые будут поочередно добавлять или удалять класс с анимацией на элементе, поэтому для воспроизведения анимации просто кликните по этому элементу.
Ключевые кадры можно группировать: @keyframes move {
from {
transform: translateX(0px);
}
25%, 50% {
transform: translateX(130px);
}
100% {
transform: translateX(0px);
}
} @keyframes move
{
from
{
transform
:
translateX
(0px
)
;
25%, 50%
{
transform
:
translateX
(130px
)
;
100%
{
transform
:
translateX
(0px
)
;
Одному элементу можно назначить несколько анимаций, их имена и параметры надо писать в порядке присвоения: element {
animation-name: animation-1, animation-2;
animation-duration: 2s, 4s;
} element
{
animation-name
:
animation-1,
animation-2
;
animation-duration
:
2s,
4s
;
Подключение анимации к элементу происходит двумя командами — animation-name
и animation-duration
.
Свойство animation-name
задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _. animation-name: move; Свойство animation-timing-function
позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease
, ease-in
, ease-out
, ease-in-out
, linear
, step-start
, step-end
. Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y);
принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте . И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps
(количество шагов, направление), в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start
или end
. Визуальное сравнение Свойство animation-delay
определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration
. Не наследуется. element {
animation-name: animation-1;
animation-duration: 2s;
animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек.
} Свойство animation-iteration-count
позволяет запустить анимацию несколько раз. Не наследуется. В качестве значения выставляем любое положительное значение 1, 2, 3 …
и т.д. либо infinite
для бесконечного повторения. Значение 0
или любое отрицательное число удаляют анимацию из проигрывания. CSS3-анимация
придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла. CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов. IE:
10.0 Создание анимации начинается с установки ключевых кадров
правила @keyframes . Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.
@keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}
Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:
@keyframes move {
from,
to {
top: 0;
left: 0;
}
25%,
75% {top: 100%;}
50% {top: 50%;}
}
Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего. После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation: H1 {
font-size: 3.5em;
color: darkmagenta;
animation: shadow 2s infinite ease-in-out;
}
Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0%). Свойство задаёт имя анимации. Имя анимации создаётся в правиле @keyframes . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, связанных между собой при помощи пробела - или символа нижнего подчеркивания _ . Свойство не наследуется. Синтаксис
Div {animation-name: mymove;}
Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы. Не наследуется. Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую. Синтаксис
Div {animation-duration: 2s;}
Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задаётся при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2) . Не наследуется. Синтаксис
Div {animation-timing-function: linear;}
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки. Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется. Синтаксис
Div {animation-delay: 2s;}
Свойство позволяет запустить анимацию несколько раз. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется. Синтаксис
Div {animation-iteration-count: 3;}
Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется. Синтаксис
Div {animation-direction: alternate;}
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел: Animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay . Свойство управляет проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover . Не наследуется. Синтаксис
Div:hover {animation-play-state: paused;}
Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется. Здравствуйте, дорогие читатели . В этот день давайте поговорим о, довольно таки, интересной штуке как CSS анимация. То есть, эта анимация элементов делается только с помощью стилей и никакие скрипты тут не используются. Как видите здесь присутствует атрибут :hover
, который меняет стиль фона при наведении, в некоторых примерах он должен быть обязательно. padding: 10px; text-indent: 0px; #box1:hover
{ Как видите такую анимацию мы добились с помощью атрибута transition
. Здесь можно изменить скорость анимации в секундах, в данном случае стоит 0.8с до полного изменения цвета при наведении и 0.1с до того как сработает анимация после наведения и убирания курсора. (Извиняюсь за ребус:-)) Это значение можно изменять как Вам нужно. Цвет фона при наведении ставится атрибутом :hover
, он здесь обязательный, иначе анимация работать не будет. padding: 10px; text-indent: 0px; #box2:hover
{ В этом примере мы добились плавного изменения размера блока при наведении. Стандартная величина 200 на 100, а величина при наведении составляет 150 на 50, которая задаётся атрибутом :hover.
Ещё здесь можно изменить блок только по ширине или по высоте, нужно просто под :hover
удалить width:
— блок изменяется только по высоте, height:
— блок изменяется только по ширине. Также можно изменить скорость изменения. В данном случае это 1с. padding: 10px; text-indent: 0px; #box3:hover { Кручение происходит с помощью transform
и transition
. В данном случае объект крутится по часовой стрелке на 360 градусов со скоростью в одну секунду. Если нужно, чтобы блок крутился против часовой стрелки, в transform
значении нужно поставить -(минус). Естественно градус оборота можно изменять. text-indent: 0px; #box4:hover { В этом примере блок плавно увеличивается в 2 раза. Это значение выставляется transform: scale(2)
. Если поставить значение 1.5, соответственно увеличение блока будет в 1.5 раза. Этим же способом можно уменьшить размер
блока, например поставить значение 0.5. #box5 { text-indent: 0px; #box5:hover { Здесь перемещение задаётся в пикселах. В данном случае (0,50px). Так же можно заставить блок подниматься вверх этим значением 0,-50px. Или по диагонали вниз 50px,50px. Одним словом блок можно заставить смещаться куда угодно. Вот в принципе и всё, что хотелось сказать. Нет, не всё :-) Забыл напомнить о том, что эту CSS анимацию можно применять к любым объектам на сайте: к картинкам, тексту, заголовкам, иконкам и т.д. Вот для ссылок отлично подойдет плавное изменение цвета, по моему очень красиво. :-) И ещё, этой информацией поделился с нами сайт shpargalkablog.ru . За что ему огромное спасибо. Вот теперь точно все:-) До скорых встреч, друзья.
будет изначально с шириной 800px и за 5 секунд уменьшится до 100px.
и всё! Давайте посмотрим как это выглядит в действительности.
1
<div
class
=
"toSmallWidth"
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.toSmallWidth
{
margin
:
20px
auto
;
/*внешние отступы сверху и снизу по 20px и выравнивание по середине*/
background
:
red
;
/*красный фон у блока*/
height
:
100px
;
/*высота блока 100px*/
width
:
800px
;
/*начальная ширина 800px*/
-webkit-animation-name
:
animWidthSitehere;
-webkit-animation-duration
:
5s;
/* свойство с префиксом для браузеров Chrome, Safari, Opera */
animation-name
:
animWidthSitehere;
/* указываем название ключевых кадров (находятся ниже)*/
animation-duration
:
5s;
/*задаем длительность анимации*/
}
/* ключевые кадры с префиксом для браузеров Chrome, Safari, Opera */
@-webkit-keyframes animWidthSitehere {
from {
width
:
800px
;
}
to {
width
:
100px
;
}
}
@keyframes animWidthSitehere {
from {
width
:
800px
;
}
/*первый ключевой кадр, где ширина блока 800px*/
to {
width
:
100px
;
}
/*последний ключевой кадр, где ширина блока 100px*/
}
3. Примеры анимации CSS3 посложнее
Базовая HTML разметка
Бесконечная анимация
Заголовок
HTML
Заголовок
Делаем анимацию при прокрутке страницы
Поддержка браузерами
Firefox:
16.0, 5.0 -moz-
Chrome:
43.0, 4.0 -webkit-
Safari:
4.0 -webkit-
Opera:
12.1, 12.0 -o-
iOS Safari:
9, 7.1 -webkit-
Opera Mini:
-
Android Browser:
44, 4.1 -webkit-
Chrome for Android:
44Правило @keyframes
Название анимации
Временная функция
Анимация с задержкой
Повтор анимации
Введение в CSS-анимацию
Поддержка браузерами
Firefox:
16.0, 5.0 -moz-
Chrome:
43.0, 4.0 -webkit-
Safari:
4.0 -webkit-
Opera:
12.1, 12.0 -o-
iOS Safari:
9, 7.1 -webkit-
Opera Mini:
—
Android Browser:
44, 4.1 -webkit-
Chrome for Android:
441. Правило @keyframes
2. Название анимации animation-name
3. Продолжительность анимации animation-duration
4. Временная функция animation-timing-function
animation-timing-function
Значения:
ease
Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) .
linear
Анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1) .
ease-in
Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) .
ease-out
Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) .
ease-in-out
Анимация медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) .
cubic-bezier(x1, y1, x2, y2)
Позволяет вручную установить значения от 0 до 1. вы сможете построить любую траекторию скорости изменения анимации.
step-start
Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Эквивалентно steps(1, start) .
step-end
Пошаговая анимация, изменения происходят в конце каждого шага. Эквивалентно steps(1, end) .
steps(количество шагов,start|end)
Ступенчатая временная функция, которая принимает два параметра. Количество шагов задается целым положительным числом. Второй параметр необязательный, указывает момент, в котором начинается анимация. Со значением start анимация начинается в начале каждого шага, со значением end - в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end .
initial
Устанавливает значение свойства в значение по умолчанию.
inherit
Наследует значение свойства от родительского элемента.
5. Анимация с задержкой animation-delay
6. Повтор анимации animation-iteration-count
7. Направление анимации animation-direction
8. Краткая запись анимации
9. Проигрывание анимации animation-play-state
10. Состояние элемента до и после воспроизведения анимации animation-fill-mode
animation-fill-mode
Значения:
none
Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.
forwards
После того, как анимация заканчивается (как определено значением animation-iteration-count), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards;).
backwards
В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate).
Плавное изменение цвета элемента при наведении с помощью transition
#box1 {
margin-bottom: 5px;
background-color: #ccc;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: background-color 0.8s 0.1s ease;
-o-transition: background-color 0.8s 0.1s ease;
-webkit-transition: background-color 0.8s 0.1s ease;
cursor: pointer;}
background-color: #97CE68;
color: #333;
}Изменение размера элемента
#box2 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
cursor: pointer;}
background-color: #97CE68;
color: #000;
width: 150px;
height:50px;
}Кручение объекта
#box3 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: all 1s 0.1s ease-in;
-o-transition: all 1s 0.1s ease-in;
-webkit-transition: all 1s 0.1s ease-in;
cursor: pointer;}
background-color: #97CE68;
color: #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}Плавное увеличение и уменьшение объекта
#box4 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-webkit-transition: all 3s ease-out;
cursor: pointer;}
background-color: #97CE68;
color: #000;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
}Плавное смещение блока вниз
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
cursor: pointer;}
background-color: #97CE68;
color: #000;
-webkit-transform: translate(0,50px);
-moz-transform: translate(0,50px);
-o-transform: translate(0,50px);
}
