Сочетание Transform и Transition в CSS

Сочетание Transform и Transition в CSS

07.08.201510880NerQ

Популярные сочетания transition и transform уже давно используются в разработке шаблонов сайтов. И сегодня мы немного поговорим об этих свойствах и разберем их детально.

Transform

Из названия свойства понятно, что он отвечает за трансформацию блоков. Имеет большое количество функций и еще большее количество их сочетаний. Эксперементируя, можно даже придумать 3D эффекты с Transform, но эта статья лишь о 2D. в CSS прописывается как transform: property, где property может содержать одно из нижеперечисленных значений:

translateX(10px) – сдвиг по горизонтали
translateY(10px) – сдвиг по вертикали
translate(25px, 30%) – сдвиг по диагонали
scaleX(2) – масштабирование по горизонтали. При этом 1 равен 100%
scaleY(2) – масштабирование по вертикали
scale(.5, 2) – масштабирование как по вертикали, так и по горизонтали
rotate(10deg) – поворот в заданную сторону (значение в градусах). При этом отрицательные значения отвечают за поворот влево, а положительные – вправо
skewX(20deg) – наклон по горизонтали. Значение так же в градусах
skewY(20deg) – наклон по вертикали
skew(5deg, -20deg) – наклон по вертикали и горизонтали
matrix(w, sky, skx, h, mx, my) – задает все вышеописанные свойства в одном, кроме rotate() и skew(). Значения matrix():
w – ширина объекта. 1 равен 100%
h – высота объекта. 1 равен 100%
sky – наклон по вертикали. 0 – без наклона
skx – наклон по горизонтали. 0 – без наклона
mx – сдвиг по горизонтали. 0 – без сдвига
my – сдвиг по вертикали. 0 – без сдвига

Пример в конце статьи.

Transition

Отвечает за плавность анимации блока. Имеет несколько свойств, которые можно задать одним. Взаимодействует не только с transform (например, с помощью transition можно сделать плавное изменение цвета или размера блока). Не поддерживается устаревшими браузерами (решается с помощью специфических -moz-transition, -webkit-transition и т.д.).

transition-property – задает свойство элемента, которое будет анимироваться
transition-duration – Задает время анимации в секундах. 1 равен одной секунде.
transition-timing-function – Тип анимации, где могут быть указаны:
– ease – медленная анимация с замедлением в середине
– linear – медленная анимация с ускорением к концу
– ease-in – анимация плавно начинается
– ease-out – анимация плавно заканчивается
– ease-in-out – анимация плавно начинается и плавно заканчивается
transition-delay – задержка перед началом анимации
cubic-bezier – анимация по Кривой Безье
transition(property, duration, timing-function) – задает все вышеперечисленные свойства, исключая cubic-beizer

Стоит отметить, что CSS3-аналог transition - animate, который работает с ключевыми кадрами (@keyframes)

Взаимодействие и примеры

transition в сочетании с transform дают нам плавную и гибкую анимацию без javascript.

Пример использования rotate()

HTML:

Код
<div class="container">
<h4>translate(15px, 15px)</h4>
<div class="transformed t-rotate" data-content="Translate"></div>
</div>

CSS:

Код
.container {
position: relative;
display: inline-block;
height: 180px;
margin: 0 1em 1em;
}
.transformed:before {
content: attr(data-content);
display: block;
margin: 0;
padding: 7px 0;
text-align: center;
font-weight: normal;
background: rgba(255,255,255,.7);
}
.transformed {
position: absolute;
bottom: 0;
background: yellowgreen;
opacity: 0.7;
}
.t-rotate {
transform: rotate(-20deg);
transition(transform, 1s, ease-in-out);
}
</b>

Спасибо за прочтение.
P.S. что-то совсем уж длинно получилось, извиняюсь.




Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт