Анимации на CSS или JS
Все мы прекрасно знаем, что анимации на сайте - это красиво.
И так, сегодня мы разберемся, как же они делаются.
CSS transition
Начнем с самых простых анимаций. Делаются они с помощью свойства transition.
Предположим, что нам нужно увеличивать размер кнопки при наведении.
2. Теперь накинем на неё красивых стилей...
Сначала разберемся, что мы написали.
font-family — указали, какой шрифт мы подключаем.
border: none — в данном случае мы указали, что кнопка будет без рамки. Этим же свойством мы можем создать свою рамку для кнопки.
padding — внутренние отступы (от текста до краев кнопки). Первое значение задает сверху и снизу, второе -слева и справа.
font-weight — толщина текста (жирность).
cursor: pointer — задает тип курсора при наведении (в данном случае пальчик).
border-radius — задает, на сколько будут скругленные края.
В данном случае получается вот такая кнопка:
Но ничего не мешает вам поменять какие-то значения.
Теперь посмотрим, как нам изменять ее размер при наведении.
За это отвечает атрибут :hover.
В данном случае, если перевести, то мы говорим "если ты навел курсором на элемент с классом btn, то увеличь его в 1.2 раза".
Фактически элемент будет увеличен лишь в 0.2 раза, так-как 1 - это его стандартный размер.
Осталось только добавить плавности переходу из одного состояния в другое.
В этом нам поможет атрибут transition. Мы не будем разбирать его подробно, разберем лишь некоторые свойства.
И так, первое значение ("transform") указывает, с каким именно свойством мы работаем. В данном случае это transform. Второе значение — это время анимации. А третье — это кривая Безье, она задает тип анимации (равномерная, быстрее в начале, медленнее в конце). Опять же, подробно разбирать не буду, так как данных знаний уже достаточно, что бы добавить "жизни" вашему сайту.
Keyframes CSS
Теперь мы переходим к более продвинутому способу анимации, а именно через ключевые кадры и свойство animation.
Начнем с того, что создадим квадрат 100х100.
Дальше зададим имя и другие параметры для самой анимации. Предлагаю увеличивать и уменьшать квадрат.
animation-name — имя анимации.
animation-duration — время, за которое пройдет один цикл анимации.
animation-iteration-count — сколько будет повторений (можно задать числом, тогда она повторится столько раз, сколько указано, либо поставить infinite и она будет проигрываться постоянно).
Теперь осталось только указать keyframes, или же шаги анимации.
Начнем с того, что все шаги идут с 0% до 100%.
Грубо говоря когда мы дошли от 0 до 100, это один цикл анимации.
После ключевого слова @keyframes мы указываем имя анимации. Дальше мы говорим, что когда анимация проиграна на 50%, то мы увеличиваем размер квадрата на 1.15, а когда 100% — то возвращаем ему обычный размер. По итогу получаем пульсирующий квадрат.
Небольшое отступление
Что-бы убедиться, что у вас все работает, можете просто переписать весь код и открыть страничку в браузере.
Ну а теперь для продвинутых - JavaScript.
В данной статье я не буду делать какую-то сложную анимацию. Я лишь сделаю так, что куб будет уезжать вправо и все.
Для начала немного поменяем стили нашего кубика:
Как видно на скриншоте, мы подключили JS, а так-же добавили абсолютное позиционирование для нашего квадрата.
Теперь займемся самой анимацией. Делать мы ее будет через requestAnimationFrame.
В первую очередь нам надо создать функцию, которая будет увеличивать расстояние от квадрата до левого края экрана.
Получаем наш бокс и помещаем его в переменную с одноименным названием. Так-же создаем переменную speed, она будет отвечать за то, на сколько пикселей элемент будет сдвигаться. А теперь более сложный момент.
Дело в том, что reauestAnimationFrame в качестве себя принимает callback-функцию, то есть внутри функции animate мы снова вызываем функцию animate:
Ну и конечно-же для того, что бы все заработало, нам надо вызвать саму функцию animate. Делаем мы это в самом низу. Теперь переходим в браузер и видим, что все вроде-бы работает, но есть одно но - элемент двигается слишком быстро. Дело в том, что requestAnimationFrame вызывает функцию 60 раз в секунду. То есть наш элемент за 1 секунду сдвигается на 60 пикселей в право, но нам бы хотелось делать это медленнее. Сейчас рассмотрим, как можно её замедлить.
Для начала получим время начала анимации:
Дальше будем получать в функции animate текущее время:
А теперь напишем небольшую функцию для расчета необходимой скорости анимации:
Вот так мы замедлили анимацию. Теперь мы можем регулировать скорость анимации, изменяя последнюю цифру в формуле newSpeed. Сейчас она делает 30 кадров в секунду. С помощью этой формулы скорость можно и увеличить. Например, поставить 120, но тогда наш квадрат будет улетать за границы экрана с огромной скоростью.
Спасибо всем, кто прочитал данную статью. Если она была полезной, ты можешь поддержать автора блога и канала копеечкой прямо здесь.