div.transition-demo{max-width:40rem;border:1px solid #e4e4e4;border-radius:.25rem}div.transition-demo header{padding:.5rem;border-bottom:1px solid #e4e4e4;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}div.transition-demo header h2{font-size:1.2rem;line-height:1.2rem}div.transition-demo header span.selected-transition{font-size:1rem;line-height:1rem}div.transition-demo section.controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem;border-bottom:1px solid #e1e1e1}div.transition-demo section.controls div.transition-config{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}div.transition-demo section.controls div.transition-config>:not(:last-child){margin-bottom:.5rem}div.transition-demo section.controls div.transition-config div.button-group button.transition-button{background:#f8f9fa;color:#28344a;cursor:pointer;border:1px solid #e8e8e8;padding:.5rem 1rem;-webkit-box-flex:1;-ms-flex:1;flex:1}div.transition-demo section.controls div.transition-config div.button-group button.transition-button.selected{border:2px solid #e40046}div.transition-demo section.controls div.transition-config div.button-group button.transition-button:first-child{border-radius:10px 0 0 10px}div.transition-demo section.controls div.transition-config div.button-group button.transition-button:last-child{border-radius:0 10px 10px 0}div.transition-demo section.controls button.toggle{background:transparent;padding:.5rem .75rem;text-align:center;border:1px solid #e1e1e1;border-radius:.5rem;min-width:2rem;cursor:pointer}div.transition-demo section.controls button.toggle.active{background:#e40046;color:#fff}div.transition-demo main{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:2rem;height:64px}div.transition-demo main svg.swap{position:absolute;left:calc(25% - 32px)}div.transition-demo main svg.static{position:absolute;left:calc(75% - 32px)}.slide-down-leave-to{-webkit-transform:translateY(100%);transform:translateY(100%)}.slide-down-enter-active,.slide-down-leave-active{-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out}.slide-down-enter{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.slide-down-leave-to{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}.slide-up-down-enter-active,.slide-up-down-leave-active{-webkit-transition:all 1s;transition:all 1s}.slide-up-down-enter,.slide-up-down-leave-active{opacity:0}.slide-up-down-enter{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.slide-up-down-leave-active{-webkit-transform:translateY(100%);transform:translateY(100%)}.slide-left-enter-active,.slide-left-leave-active{-webkit-transition:opacity .5s ease-in-out,-webkit-transform .4s ease-in-out;transition:opacity .5s ease-in-out,-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out,opacity .5s ease-in-out;transition:transform .4s ease-in-out,opacity .5s ease-in-out,-webkit-transform .4s ease-in-out;opacity:1}.slide-left-enter{-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}.slide-left-leave-to{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}.slide-right-enter-active,.slide-right-leave-active{-webkit-transition:opacity .5s ease-in-out,-webkit-transform .4s ease-in-out;transition:opacity .5s ease-in-out,-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out,opacity .5s ease-in-out;transition:transform .4s ease-in-out,opacity .5s ease-in-out,-webkit-transform .4s ease-in-out;opacity:1}.slide-right-enter{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}.slide-right-leave-to{-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}.rapid-spin-enter-active{-webkit-animation:rapid-spin .5s cubic-bezier(.18,.89,.32,1.28);animation:rapid-spin .5s cubic-bezier(.18,.89,.32,1.28)}@-webkit-keyframes rapid-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}30%{-webkit-filter:blur(.5rem);filter:blur(.5rem)}50%{-webkit-filter:blur(1rem);filter:blur(1rem)}70%{-webkit-filter:blur(.5rem);filter:blur(.5rem)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rapid-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}30%{-webkit-filter:blur(.5rem);filter:blur(.5rem)}50%{-webkit-filter:blur(1rem);filter:blur(1rem)}70%{-webkit-filter:blur(.5rem);filter:blur(.5rem)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.pop-enter-active{animation:pop-in .15s reverse}.pop-leave-active{-webkit-animation:pop-in .15s;animation:pop-in .15s}@-webkit-keyframes pop-in{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pop-in{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.1);transform:scale(1.1)}}