Создаем красивую css анимацию иконки instagram

Вначале сделаем html структуру проекта.

Родительский класс будет box, в котором будет класс логотипа logo.

Посмотрим на логотип instagram из чего он состоит.

Есть несколько цветов, которые будут переливаться на иконке.

Есть рамка фотоаппарата, объектив и точка в виде датчика фотоаппарата, три основных элемента.

Добавим эти классы в логотип.

1. logo-border элемент рамка.
2. logo-ring элемент кружок.
3. logo-dot элемент точка.

Разметка готова, код html.

Со стилями получится такая иконка.

Зададим переменные в var.sass.

У нас есть градиент под углом $corner: 45deg.

Теперь зададим три цвета для градиента.

• $fiol: #b641b0 фиолетовый цвет.
• $red: red красный цвет.
• $blue: #1f62e9 синий.

У логотипа будет анимация пять секунд $time: 5s.

Добавим переменную высоты $box: 300px и сделаем полоску, которая будет ездить вверх, вниз с градиентом и с свойством overflow: hidden, для эффекта изменения цветов у иконки $view: $box * 8.

На изображение есть полоска и скрыта.

Переменные в vars.sass.

Пропишем стили css.

Начнем оформлять родительский класс box.

Зададим высоту и ширину переменной height: $box.

Чтобы не было видно фона, который будет ездить вверх и вниз зададим свойство overflow: hidden.

У иконки сделаем закругление border-radius: 45px.

Центрируем логотип влево и вверх по 50 процентов и margin-top: -$box/2 и влево также, делаем через переменную, чтобы при изменение размера элемента он находился все равно в центре.

Добавим фон элементов &:after с позицией position: relative, чтобы быть относительно другого блока.

Чтобы было видно параметр content:  делаем пусрой.

Установим display: block и изначальные позиции влево и вверх ноль.

width: 100% фон будет на всю ширину.

Высота будет равна переменной $view.

Зададим фон линейным градиентом, вначале пишем угол градиента переменной $corner: 45deg, потом перечисляем все цвета с шагом 25 процентов background: linear-gradient ($corner, $fiol 0%, $red 25%, $blue 50%, $red 75%, $fiol 100%).

Появится иконка с градиентов в браузере.

Сделаем анимацию иконки instagram.

Добавим анимацию @keyframes для фона и назовем bg, на 0 и 100 процентах высота будет 0, на 50% сделаем отрицательную высоту.

Чтобы фон не уезжал за границы иконки top: $box — $view.

Теперь добавим анимацию к псевдоклассу &:after, у анимации первый параметр время анимации $time*2, умножаем на два, чтобы фон не так часто переливался цветами.

Зациклим анимацию infinite и установим равномерную linear.

animation: bg $time*2 infinite linear.

оформим класс логотипа logo.

Зададим для всех дивов > div общие свойства.

Это position: absolute, сверху и слева по 50 процентов.

Полоску внутри сделаем сплошной линией border: 15px solid #fff.

Чтобы все элементы были видны над полоской, которая будет ездить делаем z-index: 2.

1. Сделаем рамку &-border высотой и шириной в 73 процента, будет белая полоска, которую мы задали для всех дивов. Закругление border-radius: 45px. Отступы сверху и слева сделаем минус 38 процентов, проверяем что рамка будет по чентру.
2. Сделаем кружок &-ring и зададим 45 процентов от общий высоты и ширины. Сделаем круглым параметром border-radius: 10em. Делаем кружок по центру отступами минус 25 процентов.
3. Оформим точку &.logo-dot датчика от фотоаппарата. Сделаем точку большего приоритета и привяжем к div. Можно уменьшить кружок border: 12px solid #fff. Радиус полностью круглый. Сделаем на высоте и ширине в 25 процентах. Поучится линия, кружок наследуем от родителя свойство, поэтому сбросим left: auto.

Все делается в процентах, чтобы при изменение размера логотипа все внутренние части увеличились в пропорции.

Пропишем @keyframes для элементов.

Общий временной интервал 100%, мы разобьем на временные отрезки анимацию каждого элемента и зададим свойства.

Для всего логотипа box установим анимацию.

• 0% Сделаем всю иконку невидимой transform: scale (0), радиус 45 градусов.
• 2% Появляется большая круглая иконка transform: scale (1.4) иborder-radius: 10em.
• 5% Иконка instagram вщзращается в исходное положение transform: scale (1).
• 95% Дальше не будет анимации пока пройдет анимация у внутренних элементов transform: scale (1) и углы border-radius: 45px.
• 98% Повторяем свойства, какие были на двух процентах.
• 100% Instagram пропадает transform: scale (0).

Применим анимацию к классу box.

Время сделаем подольше $time*2 , анимация зациклина и будет вперед и назад alternate, свойство animation: box $time*2 infinite alternate.

Сделаем анимацию внутренних элементов instagram.

1 Анимация рамки @keyframes border.

• 0% Вначале анимации рамка будет круглой border-radius: 10em и маленькой transform: scale (0). Элемент будет непрозрачный opacity: 0.
• 2% оставляем свойство непрозрачности на нуле.
• 15% Элемент будет виден opacity: 1, размер станет стандартный transform: scale (1) и закругление углов у рамку border-radius: 45px.
• 90% ждем анимацию других элементов, свойства будут такие же, как и на 15 процентах. В этом интервале одинаковая анимация.

Применяем анимацию к рамке animation: border $time infinite alternate.

2 Кружок в центре @keyframes ring.

• 0% вначале мы кружок не видим transform: scale (0).
• 5% появляется transform: scale (1) и непрозрачный opacity: 0.
• 10% Размер кружка увеличится transform: scale (1.5) и станет видимым opacity: 1.
• 15% Переходит в исходное состояние transform: scale (1).
• 95% transform: scale (1) и добавляем фон кружку, получится как вспышка фотоаппарата background-color: transparent.
• 98% Увеличим размер кружка transform: scale (1.3) и фон background-color: #FFF.
• 100% В исходном состоянии transform: scale (1).

Добавим анимацию классу ring animation: ring $time infinite alternate.

Осталось только добавить анимацию датчику фотоаппарата @keyframes dot.

• 0% opacity: 0 не видно точку.
• 20% В этом интервале не будет видно точки opacity: 0.
• 25% появляется opacity: 1.
• 75% точка видна.
• 100% Постепенно исчезает opacity: 0.

Добавим анимацию классу dot animation: dot $time infinite alternate.

Код main.sass