Сложная анимация css с использованием @keyframes

Привет, мне нужно создать анимацию переключения кнопок, как эта https://d.pr/v/P8aLvl

Это делается с помощью некоторых свойств js и css opacity, scale, box-shadow.

Я пытался создать его, но моя анимация не выглядит такой гладкой. см. https://d.pr/v/QLsLdo

Посмотрите, как мигают Button 1 и Button 2. Я не понимаю, что мне здесь не хватает.

Используемый код выглядит следующим образом:

Спасибо !

jQuery(function() {

        var container = $(this);

        // console.info(container);

        var checkboxes = $('#button-switch');

        var checkedBoxes = $('#button-switch:checked');


        checkboxes.on('click', function(e) {

          if ( $('#button-switch:checked').length > 0 ) {

            $('.activity-buttons').addClass('selected-buttons first-animation').removeClass('second-animation');

          } else if ( $('#button-switch:checked').length === 0 ) {
            $('.activity-buttons').removeClass('selected-buttons first-animation').addClass('second-animation');
          }

        });
      
    });

.activity-buttons .btn-list {
  padding: 40px 20px;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.activity-buttons .btn-list li {
  position: relative;
  width: 200px;
  height: 40px;
}

.activity-buttons .btn-list .btn {
  position: absolute;
}

.activity-buttons .btn-list .btn.activity-selected {
  opacity: 0;
  pointer-events: none;
}

.activity-buttons.selected-buttons .btn-list .btn.activity-all {
  opacity: 0;
  pointer-events: none;
}

.activity-buttons.selected-buttons .btn-list .btn.activity-selected {
  opacity: 1;
  pointer-events: auto;
}

.activity-buttons.selected-buttons.first-animation .btn-list li .btn.activity-all {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
  -webkit-animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1);
  animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1);
}

.activity-buttons.selected-buttons.first-animation .btn-list li .btn.activity-selected {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .3s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .3s;
  -webkit-animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .3s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .3s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .3s;
  animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .3s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .3s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .3s;
}

.activity-buttons.selected-buttons.first-animation .btn-list li+li .btn.activity-all {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .1s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .1s;
  -webkit-animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1) .1s;
  animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1) .1s;
}

.activity-buttons.selected-buttons.first-animation .btn-list li+li .btn.activity-selected {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .4s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .4s;
  -webkit-animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .4s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .4s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .4s;
  animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .4s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .4s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .4s;
}

.activity-buttons.second-animation .btn-list li .btn.activity-all {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .3s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .3s;
  -webkit-animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .3s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .3s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, hideButtonShadow .19s cubic-bezier(.215, .61, .355, 1) .75s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .3s, buttonScaleLow .31s cubic-bezier(.55, .055, .675, .19) .65s;
  animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .3s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .3s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, hideButtonShadow .19s cubic-bezier(.215, .61, .355, 1) .75s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .3s, buttonScaleLow .31s cubic-bezier(.55, .055, .675, .19) .65s;
}

.activity-buttons.second-animation .btn-list li .btn.activity-selected {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
  -webkit-animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1);
  animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1);
}

.activity-buttons.second-animation .btn-list li+li .btn.activity-all {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .4s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .4s;
  -webkit-animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .4s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .4s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, hideButtonShadow .19s cubic-bezier(.215, .61, .355, 1) .85s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .4s, buttonScaleLow .31s cubic-bezier(.55, .055, .675, .19) .75s;
  animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .4s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .4s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, hideButtonShadow .19s cubic-bezier(.215, .61, .355, 1) .85s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .4s, buttonScaleLow .31s cubic-bezier(.55, .055, .675, .19) .75s;
}

.activity-buttons.second-animation .btn-list li+li .btn.activity-selected {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .1s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .1s;
  -webkit-animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1) .1s;
  animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1) .1s;
}

@-webkit-keyframes hideButtonScale {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
}

@keyframes hideButtonScale {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
}

@-webkit-keyframes showButtonScale {
  from {
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes showButtonScale {
  from {
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes buttonScaleHigh {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}

@keyframes buttonScaleHigh {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}

@-webkit-keyframes buttonScaleLow {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes buttonScaleLow {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes showButtonScale {
  from {
    background: transparent;
  }
  to {
    background: #fff;
  }
}

@-webkit-keyframes showButtonShadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 8px 16px rgba(208, 201, 214, .5);
  }
}

@keyframes showButtonShadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 8px 16px rgba(208, 201, 214, .5);
  }
}

@-webkit-keyframes hideButtonShadow {
  from {
    box-shadow: 0 8px 16px rgba(208, 201, 214, .5);
  }
  to {
    box-shadow: none;
  }
}

@keyframes hideButtonShadow {
  from {
    box-shadow: 0 8px 16px rgba(208, 201, 214, .5);
  }
  to {
    box-shadow: none;
  }
}

@-webkit-keyframes hideButtonBorder {
  from {
    border-color: #eaeaea;
  }
  to {
    border-color: transparent;
  }
}

@keyframes hideButtonBorder {
  from {
    border-color: #eaeaea;
  }
  to {
    border-color: transparent;
  }
}

@-webkit-keyframes showButtonBorder {
  from {
    border-color: transparent;
  }
  to {
    border-color: #eaeaea;
  }
}

@keyframes showButtonBorder {
  from {
    border-color: transparent;
  }
  to {
    border-color: #eaeaea;
  }
}

@-webkit-keyframes opacityHigh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes opacityHigh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = "activity-buttons">
  <ul class = "btn-list justify-content-center">
    <li>
      <button type = "button" class = "btn btn-outline-secondary left-align-icon activity-all" data-toggle = "modal" data-target = "#deleteModal">Button 1</button>
      <button type = "button" class = "btn btn-outline-secondary left-align-icon activity-selected" data-toggle = "modal" data-target = "#deleteModal"><i class = "icon-delete_outline"></i> Delete selected</button>
    </li>
    <li>
      <button class = "btn btn-outline-secondary left-align-icon activity-all">Button 2</button>
      <button class = "btn btn-outline-secondary left-align-icon activity-selected"><i class = "icon-vertical_align_top"></i> Export selected</button>
    </li>
  </ul>
</div>

<input type = "checkbox" id = "button-switch" class = "ml-5">

это небольшой эффект масштаба. связанные : stackoverflow.com/a/54732644/8620333

— 18.07.2019 20:59

javascript jquery html css css-animations

18.07.2019 20:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Возможно, он дрожит, потому что возвращается в исходное положение. Попробуйте animation-fill-mode: forwards; Это позволит элементу оставаться в том же состоянии после завершения анимации, а не возвращаться в исходное состояние.

18.07.2019 22:04

Другие вопросы по теме

Kendo UI Grid MVC dataSource.at(0) undefined с AutoBind = false и после dataSource.Read()

Найти первый элемент после текста

Попытка получить значение ввода недели из недельного календаря

Текстовое поле и флажок приводят к сбою кнопки отправки в Firefox

Как обновить класс элемента на основе активного класса отдельного элемента?

Как использовать tesseract.js для распознавания даты и чисел на лотерейном билете?

Проверка JQuery не устанавливается

Прокрутка текста (бегущая строка) Как я могу настроить это так, чтобы его можно было использовать несколько раз?

Удалить выбранные элементы с модальным подтверждением в jsp

Получить значение при нажатии на дату в datetimepicker

Сложная анимация css с использованием @keyframes

Ответы 1

Другие вопросы по теме

Похожие вопросы