UPD: Соберу сюда ссылки из ответов и другие найденные:
• https://loading.io/
• https://daneden.github.io/animate.css/
• http://animista.net/play/basic/scale-up
[везде куча примеров анимаций единичных элементов]. Всё еще не найден ресурс с возможностью сразу комбинировать в одном месте анимацию из множества элементов и на месте сгенерировать сложный код движения всех составляющих*)
Как работают профессиональные CSS-аниматоры? Немного поигрался с анимациями... и не то, что там есть что-то прям сложное, но с первого взгляда это выглядит как нудное задротство - сидеть и прикидывать-вымерять пиксели.
Вопрос: какие удобные инструменты есть для упрощения создания анимаций?
Воображение нарисовало инструмент, где можно было бы одновременно создать кучу разных элементов, дать им классы, назначить положения элементов в нескольких состоянииях от 0% до 100%, в формате 'drag-and-drop' - и получить готовый код... Но гугл не нашел такой
Есть универсальный инструмент, который почти полностью отвечает вашим запросам,
С помощью мышки можно выбрать размер, цвет, скорость анимации для различных объектов : иконок, лоадеров, прогрессбаров, текста и т.д
Анимацию на выходе можно получить в трёх видах 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 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
https://daneden.github.io/animate.css/
Хороший CSS аниматор, также можете использовать JQuery анимации по типу .fadeOut()
и так далее.
Есть замечательное приложение Keyshape, стоит всего $30, но оно только для Mac.
Еще есть SVGator, это онлайн-приложение с ежемесячной оплатой, есть триал-период.
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Как сделать что бы при на ведении на родительский элемент мышью срабатывал hover на все его дочерние элементы?
Прошу помощи с сеткой бутстрапаПытаюсь сделать так что бы в правом углу был блок с автоматической шириной, а по два блока в строке row
Столкнулся с такой проблемойЕсть список ul, для li задано float: left
Использую Visual Studio 2017Есть проект по созданию внешней компоненты для 1с