9

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

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

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


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

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

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

3 ответа 3

18

Есть универсальный инструмент, который почти полностью отвечает вашим запросам,

С помощью мышки можно выбрать размер, цвет, скорость анимации для различных объектов : иконок, лоадеров, прогрессбаров, текста и т.д

введите сюда описание изображения

Анимацию на выходе можно получить в трёх видах 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);
  }
}
<div class="lds-heart"><div></div></div>

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;
  }
}
<div class="lds-ripple"><div></div><div></div></div>

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);
  }
}
<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

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;
  }
}
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

SVG иконка

<svg class="lds-blocks" width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;">
<rect x="19" y="19" width="20" height="20" fill="#e4e408">
  <animate attributeName="fill" values="#d16c18;#e4e408;#e4e408" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0s" calcMode="discrete"></animate>
</rect>
<rect x="40" y="19" width="20" height="20" fill="#e4e408">
  <animate attributeName="fill" values="#d16c18;#e4e408;#e4e408" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.125s" calcMode="discrete"></animate>
</rect>
<rect x="61" y="19" width="20" height="20" fill="#e4e408">
  <animate attributeName="fill" values="#d16c18;#e4e408;#e4e408" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.25s" calcMode="discrete"></animate>
</rect>
<rect x="19" y="40" width="20" height="20" fill="#e4e408">
  <animate attributeName="fill" values="#d16c18;#e4e408;#e4e408" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.875s" calcMode="discrete"></animate>
</rect>
<rect x="61" y="40" width="20" height="20" fill="#e4e408">
  <animate attributeName="fill" values="#d16c18;#e4e408;#e4e408" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.375s" calcMode="discrete"></animate>
</rect>
<rect x="19" y="61" width="20" height="20" fill="#e4e408">
  <animate attributeName="fill" values="#d16c18;#e4e408;#e4e408" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.75s" calcMode="discrete"></animate>
</rect>
<rect x="40" y="61" width="20" height="20" fill="#e4e408">
  <animate attributeName="fill" values="#d16c18;#e4e408;#e4e408" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.625s" calcMode="discrete"></animate>
</rect>
<rect x="61" y="61" width="20" height="20" fill="#e4e408">
  <animate attributeName="fill" values="#d16c18;#e4e408;#e4e408" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.5s" calcMode="discrete"></animate>
</rect>
</svg>

Источник: https://loading.io/css/

Ресурс платный, но автор даёт возможность скачать бесплатно библиотеку CSS

https://loading.io/css/loading.css

с подробными объяснениями, как самому довольно просто сделать всё это

https://loading.io/animation/

CSS анимации работают во всех браузерах включая IE11 и Edge

Update

введите сюда описание изображения

Vivus-instant

Всё очень просто: перетаскиваете иконку в окно проги. Делаете или оставляете по умолчанию параметры анимации, там их самый минимум. Анимация будет основана на изменении stroke-dashoffset от максимума до нуля. Соответствующие стили, классы и @keyfframes прописываются автоматически.

Утилита очень удобна, если нужно быстро сделать анимацию рисования линий.

5
  • 3
    да, это крутой ресурс 20 апр 2019 в 8:41
  • @StrangerintheQ сбой системы наверное, я обращался к другому. 22 апр 2019 в 6:04
  • @Alexandr_TT Плюсики сразу были поставлены) Не хотел спешить с галочкой, на случай "если вдруг". За ответ спасибо) А того, что я искал видимо еще в мире не существует. Но такое принципиально не невозможно создать (вероятно, через Fabric JS) 23 апр 2019 в 3:36
  • @OPTIMUSPRIME а что Вы искали, просто интересно ?) 23 апр 2019 в 7:47
  • @Stranger in the Q , jsfiddle.net/OPTlMUS/xvh58sLj - игрался, оттуда и появился вопрос) Если делать не просто единичную анимированную кнопку, а какого-нибудь персонажа или условного танцующего пингвина с множеством деталей... то руки-ноги-тело-голова независимо друг от друга должны двигаться по точным траекториям, чтобы это выглядело органично. Можно было бы на JS поколдовать, создать редактор... где как-минимум, перетаскивая элементы куда надо, при клике на кнопку можно было записать все текущие координаты. 23 апр 2019 в 8:58
4

https://daneden.github.io/animate.css/

Хороший CSS аниматор, также можете использовать JQuery анимации по типу .fadeOut() и так далее.

1

Есть замечательное приложение Keyshape, стоит всего $30, но оно только для Mac.

Еще есть SVGator, это онлайн-приложение с ежемесячной оплатой, есть триал-период.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.