Страницы

Поиск по вопросам

четверг, 12 декабря 2019 г.

Инструменты для создания CSS - JS анимации

#javascript #css #svg #анимация #css_animation


UPD: Соберу сюда ссылки из ответов и другие найденные:

• https://loading.io/
• https://daneden.github.io/animate.css/
• http://animista.net/play/basic/scale-up

[везде куча примеров анимаций единичных элементов]. Всё еще не найден ресурс с возможностью
сразу комбинировать в одном месте анимацию из множества элементов и на месте сгенерировать
сложный код движения всех составляющих*)



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

Вопрос: какие удобные инструменты есть для упрощения создания анимаций?

Воображение нарисовало инструмент, где можно было бы одновременно создать кучу разных
элементов, дать им классы, назначить положения элементов в нескольких состоянииях от
0% до 100%, в формате 'drag-and-drop' - и получить готовый код... Но гугл не нашел
такой 🤷‍♀️
    


Ответы

Ответ 1



Есть универсальный инструмент, который почти полностью отвечает вашим запросам, С помощью мышки можно выбрать размер, цвет, скорость анимации для различных объектов : иконок, лоадеров, прогрессбаров, текста и т.д Анимацию на выходе можно получить в трёх видах CSS, SVG, GIF Ресурс требует регистрации, но она проста и даже не требует подтверждения ответным письмом. Даётся возможность скачать, но только один раз. Правда с другого браузера можно скачать ещё раз. Есть примеры лоадеров, которые можно забрать просто так. Ниже некоторые образцы: Пульсирующее сердце .lds-heart { display: inline-block; position: relative; width: 64px; height: 64px; transform: rotate(45deg); transform-origin: 32px 32px; } .lds-heart div { top: 23px; left: 19px; position: absolute; width: 26px; height: 26px; background: crimson; animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } .lds-heart div:after, .lds-heart div:before { content: " "; position: absolute; display: block; width: 26px; height: 26px; background: crimson; } .lds-heart div:before { left: -17px; border-radius: 50% 0 0 50%; } .lds-heart div:after { top: -17px; border-radius: 50% 50% 0 0; } @keyframes lds-heart { 0% { transform: scale(0.95); } 5% { transform: scale(1.1); } 39% { transform: scale(0.85); } 45% { transform: scale(1); } 60% { transform: scale(0.95); } 100% { transform: scale(0.9); } }
Ripple .lds-ripple { display: inline-block; position: relative; width: 64px; height: 64px; } .lds-ripple div { position: absolute; border: 4px solid dodgerblue; opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .lds-ripple div:nth-child(2) { animation-delay: -0.5s; } @keyframes lds-ripple { 0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; } 100% { top: -1px; left: -1px; width: 58px; height: 58px; opacity: 0; } }
spin-dash .lds-roller { display: inline-block; position: relative; width: 64px; height: 64px; } .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 32px 32px; } .lds-roller div:after { content: " "; display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: dodgerblue; margin: -3px 0 0 -3px; } .lds-roller div:nth-child(1) { animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 50px; left: 50px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 54px; left: 45px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 57px; left: 39px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 58px; left: 32px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 57px; left: 25px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 54px; left: 19px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 50px; left: 14px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 45px; left: 10px; } @keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Spinner .lds-spinner { color: official; display: inline-block; position: relative; width: 64px; height: 64px; } .lds-spinner div { transform-origin: 32px 32px; animation: lds-spinner 1.2s linear infinite; } .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 29px; width: 5px; height: 14px; border-radius: 20%; background: #000; } .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } }
SVG иконка Источник: https://loading.io/css/ Ресурс платный, но автор даёт возможность скачать бесплатно библиотеку CSS https://loading.io/css/loading.css с подробными объяснениями, как самому довольно просто сделать всё это https://loading.io/animation/ CSS анимации работают во всех браузерах включая IE11 и Edge

Ответ 2



https://daneden.github.io/animate.css/ Хороший CSS аниматор, также можете использовать JQuery анимации по типу .fadeOut() и так далее.

Комментариев нет:

Отправить комментарий