Как в css сделать гифку

Всё о веб-анимациях в 2022

Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.

Даже совершенно обычный сайт можно оживить анимацией:

Анимации делают работу с сайтом удобной и приятной. Например, когда пользователь совершает действие, ему можно показать какие-то изменения на странице, как здесь:

Автор — Аарон Икер, источник: dribbble.com

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

Способы создания анимаций

Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций:

CSS-анимации

Это самый простой способ анимировать объекты на странице. Он позволяет вращать, растягивать, уменьшать и увеличивать объект, перемещать его или выполнять другие действия.

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

• animation-name — имя анимации, можно задавать несколько имён через запятую;
• animation-direction — направление анимации;
• animation-fill-mode — состояние элемента до и после анимации;
• animation-play-state — управление состоянием: запуск или приостановка анимации;
• animation-timing-function — определяет, как происходит анимация в течение длительности каждого цикла;
• animation-delay — задержка начала выполнения анимации;
• animation-iteration-count — количество повторов анимации;
• animation-duration — длительность.

С помощью CSS можно создавать покадровые анимации — когда картинка, на которой нарисован объект в разных состояниях, превращается в движение. Для таких анимаций нужно иметь уже готовую раскадровку или склеить её самостоятельно из нескольких изображений.

Автор — Дилан Бауманн, посмотреть на CodePen.

CSS-анимация может быть объёмной. Для создания 3D-изображения используют свойство transform-style со значением preserve-3d . С его помощью можно вращать объект и изменять его в трёх плоскостях:

Создавать CSS-анимации можно и с помощью свойства transition. Но оно работает только при загрузке страницы, добавлении классов или изменении состояния, к примеру, hover .

Посмотреть на CodePen. Луна тоже нарисована на чистом CSS.

CSS-анимации можно запускать при загрузке страницы или при определённом действии, но для этого иногда нужен JavaScript. Например, чтобы при открытии меню на мобильном кнопка бургера превращалась в крестик, нужно добавить ей соответствующий класс с помощью JS и для этого класса прописать изменения CSS-свойств.

Автор — Бенджамин Симье, посмотреть на CodePen.

С помощью CSS можно анимировать векторную графику — SVG. Например, заставить контур постепенно появляться или добавить индикатор загрузки:

Индикатор загрузки, автор — Стивен Робертс. Посмотреть на CodePen.

SVG-анимации

Внутри SVG есть отдельный способ анимаций — SMIL. Это спецификация для анимаций, действующая только внутри векторной графики. В ней определяется набор новых тегов и их атрибутов, которые обеспечивают работу с частями SVG.

SMIL применяют, когда CSS-анимации не справляются и не могут анимировать содержимое SVG. Например, его используют, когда нужно трансформировать форму фигуры, изменив координаты для линии или саму форму:

Автор: Никки Пантони, посмотреть на CodePen.

Или когда нужно заставить элемент двигаться по заданному пути:

Автор: Фабио, посмотреть на CodePen.

А такая анимация похожа на покадровую в CSS, но это всё ещё SMIL:

JavaScript-анимации

Третий способ создания анимаций — с помощью JavaScript. Его используют, когда другие способы не подходят. Например, с помощью JS можно создать популярный параллакс-эффект — когда при прокрутке окна браузера элементы фона на переднем и заднем плане двигаются с разной скоростью. Это даёт ощущение трёхмерного пространства.

Автор — Джереми Кэрис, посмотреть на CodePen.

Самые сложные анимации создают с помощью JavaScript, WebGL и специальных библиотек, которые упрощают написание кода к анимациям: Three.js, TweenMax или GSAP.

Сайты с JavaScript-анимацией загружаются долго, могут работать медленно, но вызывают «вау-эффект».

Как оптимизировать анимации на сайте?

Чем больше анимаций на сайте, тем больше информации приходится обрабатывать браузеру. И чем сложнее анимации, тем медленнее отрисовывается страница. Поэтому важно выбирать правильные способы анимирования и не усложнять их. Например, если нужно просто вращать элемент вокруг своей оси, то лучше использовать animate и transform , а не подключать JS-библиотеку.

Свойство transform универсально для большинства ситуаций, и когда мы его используем, браузеру легче заново отрисовать изменения на странице. К примеру, если нужно переместить объект, то стоит использовать transform: translate , а не абсолютное позиционирование и координаты left и right .

Таких тонкостей у анимаций много. Нужно их обязательно соблюдать, чтобы не превратить сайт в медленно работающего «монстра», от которого «убегают» пользователи.

Как создать простую анимацию?

Самый простой способ познакомиться с анимациями — изучить свойства animation . В этом поможет спецификация, переведённая на русский язык.

Попробуем вместе сделать простую анимацию — прыгающий мячик.

Сначала создадим HTML-разметку. Добавим два элемента. Первый — ball , сам мяч. Второй — ball-bg , элемент для фона, создаём его внутри ball. Делаем два разных элемента, потому что мячик будет скакать, а внутри него станет вращаться фон.

Добавляем базовую CSS-стилизацию для элементов: размеры, скругление углов, фон футбольного мяча.

Создаём первую анимацию с помощью директивы @keyframes @keyframes (rotating-ball) @keyframes . Называем её rotating-ball , так как она отвечает за вращение мяча. Внутри анимации добавляем две точки: от какого (0%) и до какого (100%) состояния должен вращаться мяч. Это будет 0 и 180 градусов соответственно. Градусы в CSS прописываем с помощью deg — 180deg .

Чтобы применить анимацию к элементу, задаём свойство animate элементу ball-bg . Чтобы проще было с ним разбираться, будем пользоваться отдельными свойствами внутри animate.

• имя анимации, которое указали в @keyframes @keyframes (rotating-ball) ;
• длительность анимации — animation-duration — за сколько она проходит от точки 0% до 100%.
• количество повторений — animation-iteration-count, сделаем анимацию бесконечной — infinite;
• как будет развиваться анимация между ключевыми кадрами — animation-timing-function , сделаем равным linear .

@keyframes rotating-ball < 0% 100% > .ball

Теперь усложним анимацию: сделаем так, чтобы мяч прыгал. Для этого используем свойство transform и его значения:

• translate — для перемещения горизонтально и вертикально;
• scale — чтобы имитировать эффект сжатия и растягивания мяча, когда он ударяется об пол;
• rotate — придать дополнительное вращение при ударах.

У этой анимации будет больше ключевых кадров, потому что мы постараемся максимально подробно описать поведение мяча. Начнём с первого и последнего кадра. Потом добавим кадры, когда мяч должен ударяться об пол. Можно помочь себе и нарисовать с помощью CSS линию, чтобы видеть, обо что ударился мяч. При ударе об пол используем scale , чтобы сжать мяч. Так как на следующих шагах scale не будет, мяч вернётся к исходным размерам.

@keyframes bouncing-ball < 0% 12% 15% 18% 21% 45% 48% 51% 69% 72% 75% 90% 100% >

Теперь применим анимацию к элементу ball . Длительность анимации делаем больше секунды.

Добавим промежуточные пункты, чтобы анимация смотрелась более правдоподобно. Получаем результат:

Итоги

Анимации помогают удивить пользователя и подсказать, как работать с вашим сайтом. Они также выделяют вас среди конкурентов: анимированные сайты легче запоминаются, на них хочется возвращаться вновь. При этом технические возможности для реализации любых анимаций сейчас на пике, потому что устройства стали производительнее и появилось множество специальных библиотек.

Однако анимации могут и отталкивать посетителей, если они замедляют загрузку страниц. Поэтому важно оптимизировать их и выбирать правильные способы анимации. Это пригодится почти любому фронтендеру, а научиться этому (и всему, что связано с анимациями) можно на курсе по анимациям от HTML Academy.

Автор: Елизавета Пак, старший HTML-верстальщик в Brain Rocket

Источник

How to convert CSS3 animation in *.gif

In last few years, it is trendy to provide better user experience by adding small changes in the interface using css3 animation. Currently, experiments with this feature take us far away from simple effects. If you have a good imagination and tech skills, you can even create the solar system in the pure CSS.

However, in production, we still use css3 animation for more pragmatic tasks, for example for creating pure CSS spinners. There are a lot of solution for beautiful spinners in open-source.

See the Pen Sit ‘n Spin by esjay (@esjay) on CodePen.

They are compatible with most modern browsers, but sometimes for some reasons, the need to have the same spinner in gif format can arise. For example, if the same spinner must be used in the third-party services, that are included in your solution in the iframe. Or if you need compatibility with very old browsers. The first idea that comes to mind is to search some solution, where you can load your page with the spinner and obtain gif at the end. Here I need to disappoint you. There are no such services. The reason for it is the fact that CSS3 animation and GIF are very different technologies.

There is still the way in which CSS3 animation can be converted in the *.gif. To do this, you need to follow next steps.

1. Make screen video of your CSS3 animated component. If you need your *.gif to be in the transparent background, first of all, move an animated component to the separate page with the white background. Config your monitor, so it wouldn’t distort colors of your component. Choose the tool for screencasting that allows saving video directly in the *.gif format. I used GifCam (http://gifcam.en.softonic.com/). This light free software that wouldn’t need even installation.

If you do not need your *.gif to be in the transparent background or if white background works well for you then the first one step was the last one. However, most probably you will need your *.gif to be in the transparent background. To do so, follow next steps.

1. Open your *.gif file that you saved after screencasting in the Photoshop (yes, it can do this, I also was surprised by this fact). Photoshop will convert you *.gif in the file with multilayers, every of which would be the frame of your *.gif.
2. Follow next one instruction to make the background transparent in every layer: http://graphicdesign.stackexchange.com/a/21686. Note that you can create one Hue/Saturation, one Invert, and one Curve layers and use them to make all your layers from the *.gif transparent. You will only need to create the separate mask for every layer.
3. After you finished making the background transparent in every layer, you need to make the video from this layers. For this purpose go “Window” -> “Timeline”. The new tool will appear on your screen. In it, you obtain an ability to manipulate with frames in your future *.gif video. You can choose what layer of your file show on which frame, and how much time it should be displayed. If you are planning to make *.gif file from the frames, do not forget to choose in the “Looping options” – “Forever”, so your video never stop playing until it would be displayed.
4. Use “Play” button in the Timeline window to see how your *.gif would be looking like. In this step maybe you will need to remove some frames at the end or at the beginning or at the end of the video, so it will look more smoothly in endless playing mode.
5. When you think that you finished with the improving your future *.gif, go “File” -> “Save for Web… “. Choose an appropriate option for you. Also in this window, you can see a preview of the *.gif that you have created (hit button “Preview…” in left bottom corner). If everything looks good push “Save…”. Finish!

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Источник