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

252

03 февраля 2020, 13:50

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

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

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

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

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

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

Answer 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); 
  } 
}

<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

Answer 2

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

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

Answer 3

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

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