» Анимация css

Анимация css

CSS анимация создает анимированые переходы с помощью конфигурирования CSS стилей в ключевых кадрах по времени. CSS-анимация состоит из стилевого описания и набора ключевых кадров.

Анимация на чистом css

CSS анимация создает анимированые переходы с помощью конфигурирования CSS стилей в ключевых кадрах по времени. CSS-анимация состоит из стилевого описания и набора ключевых кадров.

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

Animation -это краткая запись для всех ниже приведеных свойств анимации. Для animation важна последовательность записи:

краткая запись animation

Порядок свойств анимации в сокращеной записи:

------

Синтаксис записи:


< style >
/* призначаем анимацию */
.marquee {display:block; width:200%; animation: marquee 16s linear infinite;}

/* призначаем ключевые кадры */
@keyframes marquee {
    0%   {display:block; width:200%;} 
    100% {display:none; width:10%;}
}
< / style >
*Подробнее о @keyframes

Несколько анимаций к одному стилю:


< style >
.nameclass {
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
}
< / style >
❃❃❃❃❃

CSS3 анимация против переходов

Анимация (Animations) - очень гибкая и очень много настроек, имеет кадры, начинается автоматически.

Переходы (Transitions) - очень просто и быстро, нужно вызвать, зацыклить можно через js.

В каких случаях какой способ лучше применять?

  • Если требуется гибкость, обеспечиваемая, ключевыми кадрами и простотой зацикливания, то предпочтительно использовать анимацию;
  • Если нужна простая анимация из начальной точки в конечную, то следует использовать переходы;
  • Если необходимо манипулировать значением свойств в соответствии с внешними воздействиями или вычислениями, то идеально использование связки переход + jаvascript. Хотя и анимация, немного посложнее, тоже хорошо поддерживает  js.
------

Переходы (Transitions)

запись transitions
Примеры трансформации

Синтаксис записи:


< style >
.namestyl {transition: margin-right 2s ease-in-out .5s;}
< / style >

Краткое описание основных функций трансформации блоков в css3.

1. Смещение точки трансформации(не обезятелен!)

Свойство позволяет сместить центр ВОКРУГ которого буде происходит трансформация блока, изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов. Не наследуется.

Оси трансформации 

--- последовательность осей -transform-origin: <x> <y> <z>
=====
{transform-origin: 20% 40%;} - Сметили только по "Х" и по "Y"

2. Допустимые значения:

----
ПОВОРОТ блока:
a:hover {transform: rotate(20deg);}

----
СДВИГ по оси Х - Y:
a:hover ~ i {transform: translateX(50%);transition: all 1.3s ease-out;}
можно:
  {transform: translate(20px, -20px);}
  {transform: translateX(20px);}
  {transform: translateY(-20px);}

----
МАШТАБИРОВАНИЕ:
a:hover {transform: scaleX(1.2;);}
можно:
  {transform: scale(1.2, 1.2);}
  {transform: scaleX(1.2);} 
  {transform: scaleY(1.2);}

-----
ТРАНСФОРМИРОВАТЬ на угол: (deg, grad, rad, turn)
a:hover {transform: -12deg;}
  {transform: 720deg;} развернет дважды

-----
ИСКАЖЕНИЕ: (deg, grad, rad)
a:hover {transform: skewX(12deg);}
можно:
  {transform: skew(12deg, 12deg);}
  {transform: skewX(12deg);} 
  {transform: skewY(12deg);}

 

Можно все трансформации обьединить в одной записи:


matrix(a, c, b, d, x, y)


Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения.


Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает.
Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз.
Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо.
Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает.
Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево.
Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.


3. Несколько трансформаций в одной записи:

div {transform: scale(1.5) rotate(-10deg);}


======= ↴

Совместимость с браузерами

 
 Chrome Edge Firefox Internet Opera Safari
4312161030Yes
 
 Android Chrome Edge Firefox Opera Safari Samsung
Yes43Yes1630Yes4.0

custom-ident

Анимация css 31 0  

Имя или имена одного или нескольких CSS-свойств, которые вы собираетесь изменить. Вы можете поместить несколько значений, разделённых запятой.

transition-timing-function

Анимация css 23 0  

transition-timer-function определяет способ вычисления промежуточных значений для свойств CSS, на которые влияет эффект перехода.

transition-property

Анимация css 28 0  

transition устанавливает свойства CSS, к которым должен применяться эффект перехода.

transition-duration - Время перехода

Анимация css 21 0  

transition-duration устанавливает время, которое анимация перехода должна занять для завершения. По умолчанию значение равно 0 с, что означает, что анимация не будет выполняться.

animation-iteration-count - Повторы анимации

Анимация css 29 0  

animation-iteration-count задает, сколько раз цикл анимации должен быть воспроизведен перед остановкой. Если указано несколько значений, каждый раз, когда воспроизводится анимация, используется следующее значение в списке, возвращаясь к первому значению после последнего.

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019