使用@keyframes 的复杂 css 动画

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">

Answer 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.