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

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

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

*alternate - анимация туда и обратно.

*infinite - бесконечная анимация, зацыклить.

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

• 1. animation-name: name (Определяет имя @keyframes)
• 2. animation-duration: 12s (время одного цыкла анимации)
• 3. animation-timing-function: ease (вид ускорения)
• 4. animation-delay: 0s (время задержки анимации)
• 5. animation-iteration-count: 3 (количество повторов анимации)
• 6. animation-direction: alternate (направление анимации)
• 7. animation-fill-mode: none (состояние до и после анимации)
• 8. animation-play-state: running (запущена или на приостановлена анимация)

CSS Grid Layout существует 5 анимируемых свойств сетки: grid-gap, grid-row-gap, grid-column-gap, grid-template-columns, grid-template-rows

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

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

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

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

< 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)

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

< style >
.namestyl {transition: margin-right 2s ease-in-out .5s infinite ;}
< / style >
*infinite - бесконечное проигрование

• 1. transition-property all (свойство css к которому будет применятся переход)
• 2. transition-duration 1s (Продолжительнасть перехода)
• 3. transition-timing-function ease (Как протекает анимация)
• 4. transition-delay 0s (Задержка перехода)

Краткое описание основных функций трансформации блоков в 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);}