Complex css animation using @keyframes

Question

Hi I need to create button swap animation like this https://d.pr/v/P8aLvl

This is done by the use of some js and css properties opacity, scale, box-shadow.

I tried creating it but my animation doesn't look this smooth. see https://d.pr/v/QLsLdo

See how Button 1 and Button 2 flickers. I don't understand what i am missing here.

The code used is as below:

Thank you !

jQuery(function() {

        var container = $(this);

        // console.log(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">

it's the little scale effect. related : stackoverflow.com/a/54732644/8620333 — Temani Afif
– Temani Afif, Commented Jul 18, 2019 at 18:59

Reid Svntn · Accepted Answer · 2019-07-18 20:04:16Z

1

It might be jittering because it is returning back to it's original position. Try animation-fill-mode: forwards; This will have the element remain in the same state when animations complete rather than revert to the original state.

answered Jul 18, 2019 at 20:04

Reid Svntn

1161 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Complex css animation using @keyframes

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related