Как реализовать на css3 плавное появление элемента. Краткая запись анимации
CSS3 позволил делать много новых эффектов, не прибегая к помощи JavaScript-библиотек. В этой статье расскажу о том, как реализовать с помощью css3 плавное появление любого элемента.
Смотрим на примере
Допустим, у нас есть два одинаковых блока. В html разметке я предлагаю обозначить их так:
Каждый элемент получил два стилевых класса. Зачем это нужно? Первым классом мы зададим общие правила внешнего вида, блоки же одинаковые, так что их можно описать совместно. В реальном примере, скорее всего, будет по-другому. Также каждый элемент получил собственный уникальный стилевой класс. Он тоже пригодится.
Block{ font-size: 50px; width: 200px; height: 120px; background: green; margin-bottom: 30px; transition: 1s }
Этими правилами мы прописали обоим блокам одинаковый внешний вид: высоту, ширину, размер шрифта, отступ и зеленый фон. Последнее свойство transition как раз и является относительно новым и входит в версию CSS3 . Оно обозначает задержку, после которой выполняются определенные правила. По сути, именно это дает плавное появление.
В примере я прописал 1 секунду, по желанию можно поставить больше или меньше. Когда вы увидите свойство в действии, то сами сможете отрегулировать его значение.
Как реализовать в css3 плавное появление?
Дальше есть два варианта действий. Допустим, нам нужно пока скрыть второй блок, а при наведении на первый плавно выводить его. Наиболее часто для скрытия элемента применяют правило display: none , но оно не даст именно того, чего нужно – плавного появления. Элемент появится резко.
Поэтому мы поступим по-другому. Смотрите этот код:
Block2{ opacity: 0; } .block1:hover + .block2{ opacity: 1 }
Мы использовали еще одно CSS3-свойство – opacity . Оно задает прозрачность элемента, которая прописывается от 0 (полностью прозрачный) до 1 (полностью непрозрачный) элемент.
Сначала полностью убираем второй блок от глаз, делая его прозрачным. Теперь нужно сделать так, чтобы при наведении мышки на первый блок плавно появлялся второй. Для этого используется такой вот интересный комбинированный селектор.block1:hover + .block2
То есть само изменение стилей происходит при наведении на первый блок, а изменяется непосредственно второй. Благодаря прописанному ранее transition он появится не резко, а плавно, что нам с вами и нужно. Изменяя значение transition можно сделать появление более резким или наоборот еще больше замедлить его.
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Введение в CSS-анимацию
Поддержка браузерами
IE: 10.0
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
1. Правило @keyframes
Создание анимации начинается с установки ключевых кадров правила @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%).
2. Название анимации animation-name
Свойство задаёт имя анимации. Имя анимации создаётся в правиле @keyframes . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, связанных между собой при помощи пробела - или символа нижнего подчеркивания _ . Свойство не наследуется.
Синтаксис
Div {animation-name: mymove;}
3. Продолжительность анимации animation-duration
Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы. Не наследуется. Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.
Синтаксис
Div {animation-duration: 2s;}
4. Временная функция animation-timing-function
Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задаётся при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2) . Не наследуется.
| 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 | Наследует значение свойства от родительского элемента. |
Синтаксис
Div {animation-timing-function: linear;}
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
5. Анимация с задержкой animation-delay
Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки.
Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.
Синтаксис
Div {animation-delay: 2s;}
6. Повтор анимации animation-iteration-count
Свойство позволяет запустить анимацию несколько раз. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется.
Синтаксис
Div {animation-iteration-count: 3;}
7. Направление анимации animation-direction
Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.
Синтаксис
Div {animation-direction: alternate;}
8. Краткая запись анимации
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:
Animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .
9. Проигрывание анимации animation-play-state
Свойство управляет проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover . Не наследуется.
Синтаксис
Div:hover {animation-play-state: paused;}
10. Состояние элемента до и после воспроизведения анимации animation-fill-mode
Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.
| 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). |
- Перевод
Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого . Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
Система координат
Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.
Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат , так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.
1: Горизонтальное перемещение
Первое перемещение, которое мы продемонстрируем - горизонтальное. Мы будем двигать объекты слева направо и справа налево.Двигаемся вправо
Чтобы переместить объект мы будем использовать transform: translate(x,y) , где X - положительное число, а Y=0.
HTML
Откройте ваш любимый редактор кода и введите следующее:
Мы определили три класса к картинке:
- object: Установление главных правил нашего объекта.
- van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
- move-right: Используя этот класс, мы будем двигать наш объект.
Во-первых, мы разместим наш объект (картинку грузовика) по центру.
.object { position: absolute; } .van { top: 45%; left: 44%; }
В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0); . Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.
#axis:hover .move-right{
transform: translate(350px,0);
-webkit-transform: translate(350px,0); /** Chrome & Safari **/
-o-transform: translate(350px,0); /** Opera **/
-moz-transform: translate(350px,0); /** Firefox **/
}
Параметр transform
всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе.object.
Object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
Это правило перемещение скажет браузеру анимировать все
параметры объекта на 2 секунды
(без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:
- linear : перемещение происходит постоянной скоростью от начала и до конца.
- ease : перемещение начинается медленно и затем набирает скорость.
- ease-in : перемещение начинается медленно.
- ease-out : перемещение заканчивается медленно.
- ease-in-out : перемещение начинается и заканчивается медленно.
- cubic-bezier : ручное определение значения перемещения.
Двигаемся влево
Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ , в то время как Y остается неизменным. В нашем случае мы переместим объект на -350px влево.
HTML
Создайте новый документ html и вставьте следующий код:
На этот раз мы используем класс move-left, чтобы переметить объект влево.
CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0);
- переместим объект влево.
#axis:hover .move-left {
transform: translate(-350px,0);
-webkit-transform: translate(-350px,0); /** Safari & Chrome **/
-o-transform: translate(-350px,0); /** Opera **/
-moz-transform: translate(-350px,0); /** Firefox **/
}
Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
2: Вертикальное перемещение
Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.Двигаемся вверх
HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.
CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket {
top: 43%;
left: 44%;
}
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.
#axis:hover .move-up {
transform: translate(0,-350px);
-webkit-transform: translate(0,-350px);
-o-transform: translate(0,-350px);
-moz-transform: translate(0,-350px);
}
Двигаемся вниз
Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);
HTML
CSS
#axis:hover .move-down {
transform: translate(0,350px);
-webkit-transform: translate(0,350px);
-o-transform: translate(0,350px);
-moz-transform: translate(0,350px);
}
3: Диагональное перемещение
Чтобы переместить объект по диагонали, мы совместим параметры x и y . Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.
HTML
CSS
#axis:hover .move-ne {
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}
4: Вращение
Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg) ; где n - градусы.
Вращение по часовой стрелке
Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg) .HTML
CSS
#axis:hover .rotate360cw {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
Вращение против часовой стрелки
Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg) .
HTML
CSS
#axis:hover .rotate360ccw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
5: Масштабирование
Масштабирование - это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y) , мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X - ширина, а Y - высота.Давайте посмотрим на следующий пример.
Модель визуального форматирования CSS описывает систему координат внутри каждого позиционированного элемента. Система координат является точкой отсчета для свойств смещения. Положение и размеры в этом координатном пространстве можно рассматривать как заданные в пикселях, относительно точки отсчета, с положительными значениями, идущими вправо и вниз. Это координатное пространство можно изменить с помощью свойства transform .
CSS3-трансформации позволяют сдвигать, поворачивать и масштабировать элементы. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.
К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block; , а также элементы, значение свойства display которых вычисляется как table-row , table-row-group , table-header-group , table-footer-group , table-cell или table-caption . Трансформированным считается элемент с любым установленным значением свойства transform , отличным от none .
Существуют два вида CSS3-трансформаций – 2D и 3D . 2D-трансформации преобразовывают элементы в двумерном пространстве c помощью 2D-матрицы преобразований. Эта матрица применяется для вычисления новых координат объекта, на основе значений свойств transform и transform-origin . Преобразования влияют только на визуальный рендеринг. В отношении макета страницы они могут отразиться на переполнении содержимого блока. По умолчанию точка трансформации находится в центре элемента.
2D-трансформации элементов
Поддержка браузерами
IE: 10.0, 9.0 -ms-
Edge: 12.0
Firefox: 16.0, 3.5 -moz-
Chrome: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Android Browser: 53, 2.1 -webkit-
Chrome for Android: -webkit-
1. Функции 2D-трансформации transform
Свойство задаёт вид преобразования элемента. Свойство описывается с помощью функций трансформации , которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. Не наследуется.
Допустимые значения:
matrix() — любое число
translate() , translateX() , translateY() — единицы длины (положительные и отрицательные), %
scale() , scaleX() , scaleY() — любое число
rotate() — угол (deg, grad, rad или turn)
skew() , skewX() , skewY() — угол (deg, grad, rad)
| Функция | Описание |
|---|---|
| none | Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов. |
| matrix(a, c, b, d, x, y) | Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх. |
| translate(x,y) | Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения. |
| translateX(n) | Сдвигает элемент относительно его обычного положения по оси X. |
| translateY(n) | Сдвигает элемент относительно его обычного положения по оси Y. |
| scale(x,y) | Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально. |
| scaleX(n) | Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали. |
| scaleY(n) | Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали. |
| rotate(угол) | Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота. |
| skew(x-угол,y-угол) | Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически. |
| skewX(угол) | Деформирует стороны элемента относительно оси X. |
| skewY(угол) | Деформирует стороны элемента относительно оси Y. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Div { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.
2. Точка трансформации transform-origin
Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center , или 50% 50% . Задаётся только для трансформированных элементов. Не наследуется.
Веб-дизайн сегодня сильно отличается от того, каким он был лет 5 назад. CSS3 предлагает нам много новых полезных штуковин, без которых сайт выглядит если не плохо, то уж точно не современно. Одним из ключевых плюсов считаю использование различных анимационных эффектов. Об анимации на CSS3 и пойдет речь в данной статье.
Анимация на CSS3 с помощью transition
В своих проектах я много раз обращалась к CSS-свойству transition . С его помощью можно создать примитивные симпатичные анимации. Обычно применяю его для hover-ов, ведь времена, когда абсолютно всё выделялось подчеркиванием при наведении, прошли еще до того, как я увлеклась Веб-дизайном.
Свойство transition ответственно за параметры анимации, такие как: изменяемое CSS-свойство объекта, длительность анимационного перехода, функция времени, задержка анимации.
transition : свойство скорость_анимации временная_функция задержка
Самый банальный вариант анимации на CSS3 - преобразование цвета блока при наведении. Посмотрим как это получится transition и без него:
Используя transition. (Цвет фона меняется плавно.)
With_transition { background :#efefef; -webkit-transition : background 1s linear 0s ; -moz-transition : background 1s linear 0s ; -o-transition : background 1s linear 0s ; transition : background 1s linear 0s ; } .with_transition:hover { background :#F9FF66; }
Без transition. (Цвета заменяют друг друга мгновенно.)
Without_transition { background :#efefef ; } .without_transition:hover { background :#91FF66 ; }
Свойство transition простое и понятное. Хочу только остановиться на одном из его параметров - временной функции. Эта функция задается с помощью кривой Безье (cubic-bezier ), которая принимает 4 значения (x1,y1,x2,y2) - координаты направляющих точек.
Несколько частных случаев этой функции имеют свои названия, например linear. Но если нужен нестандарный эффект, то можете воспользоваться данным генератором . Покажу вариант использования нестандартной временной функции:
.over { -webkit-transition : ; -moz-transition : left 1s cubic-bezier(0,.99,.98,.02) 0s ; -o-transition : left 1s cubic-bezier(0,.99,.98,.02) 0s ; transition : left 1s cubic-bezier(0,.99,.98,.02) 0s ; left :0px ; } .kot-krol:hover .over{ left:325px ; }Трансформация на CSS3 (transform)
Анимация на сайтах выглядит круто, даже если это обычное изменение фона или положения объекта. Но намного эффектнее будет применить трансформацию. Для нее в CSS3 существует свойство transform и несколько значений, которые оно может принять. Ниже рассмотрю все возможные:
Например, используем поворот transform : rotate(<угол>) :
Или же смещение transform : translate(x, y) :
Также можно применить масштаб transform : scale(x, y) :
И еще наклон transform : skewX[Y](<угол>) :
.skew { -webkit-transition : all 1.5s linear 0s ; -moz-transition : all 1.5s linear 0s ; -o-transition : all 1.5s linear 0s ; transition : all 1.5s linear 0s ; } .skew:hover { -webkit-transform : skew(-30deg) ; -moz-transform : skew(-30deg) ; -ms-transform : skew(-30deg) ; -o-transform : skew(-30deg) ; transform : skew(-30deg) ; }Более сложные трюки с анимацией на CSS3 (animation, @keyframes)
Все это помогает быстро и просто сделать интересный дизайн. Казалось бы, чего еще желать? Но я столкнулась с проблемой, с которой не удалось справится лишь CSS-свойствами transform и transition .
Речь идет о следующем: хотелось на некотором сайте сделать один блок постоянно вращающимся. Конечно, первая мысль - написать пару строчек на JavaScript, но до сегодняшнего дня меня успели убедить в том, что такой подход неправильный и даже некрутой! Пришлось искать другие пути.
Итак, я узнала о CSS-свойствах animation и @keyframes . Действительно очень полезная для анимации на CSS3 штука!
Два вышеупомянуых свойства функционируют вместе. animation задает параметры анимации (продолжительность анимации, временную функцию, задержку, количество итераций). Последнее представляло для меня особый интерес.
@keyframes , в свою очередь, вмещает разные состояния анимируемого элемента, как бы точки отсчета. Первым параметром animation принимает имя @keyframes . Выглядит это, примерно, вот так:
.kot { -webkit-animation : rotating 30s infinite linear ; -moz-animation : rotating 30s infinite linear ; -ms-animation : rotating 30s infinite linear ; -o-animation : rotating 30s infinite linear ; animation : rotating 30s infinite linear ; } @-webkit-keyframes rotating { to { -webkit-transform : rotate(360deg); } } @-moz-keyframes rotating { to { -moz-transform : rotate(360deg); } } @-ms-keyframes rotating { to { -ms-transform : rotate(360deg) ; } } @-o-keyframes rotating { to { -o-transform : rotate(360deg) ; } } @keyframes rotating { to { transform : rotate(360deg) ; } }Для моей задачи - постоянно вращающийся блок на CSS3 - хватило задать только конечное положение элемента (to). Но в @keyframes можно задавать и начальное положение (from), и любые промежуточные в процентах. Это пригодится для создания более сложных анимаций.
Загрузка...
