Please enable JavaScript.
Coggle requires JavaScript to display documents.
Анимации (transform: тип_трансформации(значение); (Перемещение transform:…
Анимации
transform
: тип_трансформации(значение);
Перемещение
transform: translate(x , y); translareX, translateY
Масштабирвоание
transform: scale(1.5); scale(x, y) scaleX scaleY Отрицательные значения зеркалят блок
Вращение
transform: rotate(180deg); поворот элемента вокруг оси rotate(-180deg) rotate(1.5turn)- полтора оборота по часовой
Наклон
transform: skew(45deg, 0);
Множественные преобразования
transform: scale(2) translateX(100px) rotate(45deg); Слева направо При повороте смещается ось!!!
Исходная точка
transform-origin: left top;
Перспектива
создает иллюзию глубины и позволяет перемещать в двумерном пространстве экрана точку вдоль и вокруг оси Z perspective: 200px;
Расположение точки
/
по-умолчанию: perspective-origin: 50% 50%;
/
Свойства transform
2D
translate(x,y)
scale(x,y)
rotate(angle)
matrix(a, b, c, d, e, f)
Свойства transform
3D
translate3d(x,y,z)
scale3d(x,y,z)
rotate3d(x,y,z,angle)
matrix3d(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)
transform-style
Сообщает о том что дочерние элементы позиционируются в 3D-пространстве. transform-style: preserve-3d;
backface-visibility
Определяет видимость задней стороны объекта. backface-visibility: visible; backface-visibility: hidden;
Матрица преобразований
transform: matrix(2, 0, 0, 1, 0, 0);
matrix(a, c, b, d, tx, ty);
Переходы
анимация от одного набора CSS свойств к другому. Для перехода необходимо:
Свойство
перехода
transition-property: transform;
Длительность
перехода
transition-duration: .3s;
Несколько свойств
transition-property: transform, background-color;
transition-duration: 0.3s, 300ms;
Задержка перехода
transition-delay: 0s, 0.5s;
Тип перехода
transition-timing-function: linear;
Краткая запись
property duration [timing-function] [delay]
transition: transform .5s ease-in 1s;
а еще для нескольких св-в иди для all
Animation Позволяет анимировать переходы между ключевыми кадрами.
Ключевые кадры
keyframes
animationName {
from {
/
css свойства для первого кадра
/
}to{
/
css свойства для второго кадра
/}}
Задается имя элемента и действие. Ключевые точки задаются в %
Задержка анимации
animation-delay: 1s;
Тип анимации
animation-timing-function: cubic-bezier(...);
Повторение анимации
animation-iteration-count: 3; или infinite
Скачки между повторениями
animation-direction: alternate;
Скачки после завершения
animation-fill-mode: forwards;
Краткая запись
animation-name: scale;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
animation-direction: alternate;
animation-delay: 5s;
animation-fill-mode: forwards;
Запись:
animation: scale 2s ease-in-out 3 alternate 5s forwards;
Управление анимацией
При наведении на обьект animation-play-state: paused; пауза
Блокировка свойств
Если есть !important; можно перебить
from { background: red }
to { background: red }
Pure css
paralax