rsuite/Animation/styles/index.css

A suite of react components

:root{
  --rs-anim-fade-duration:0.15s;
  --rs-anim-collapse-duration:0.35s;
}

@keyframes slideInLeft{
  from{
    opacity:0;
    transform:translate3d(-100%, 0, 0);
  }
  to{
    opacity:1;
    transform:none;
  }
}
@keyframes slideOutLeft{
  from{
    opacity:1;
    transform:none;
  }
  to{
    opacity:0;
    transform:translate3d(-100%, 0, 0);
  }
}
@keyframes slideInRight{
  from{
    opacity:0;
    transform:translate3d(100%, 0, 0);
  }
  to{
    opacity:1;
    transform:none;
  }
}
@keyframes slideOutRight{
  from{
    opacity:1;
    transform:none;
  }
  to{
    opacity:0;
    transform:translate3d(100%, 0, 0);
  }
}
@keyframes slideInTop{
  from{
    opacity:0;
    transform:translate3d(0, -100%, 0);
  }
  to{
    opacity:1;
    transform:none;
  }
}
@keyframes slideOutTop{
  from{
    opacity:1;
    transform:none;
  }
  to{
    opacity:0;
    transform:translate3d(0, -100%, 0);
  }
}
@keyframes slideInBottom{
  from{
    opacity:0;
    transform:translate3d(0, 100%, 0);
  }
  to{
    opacity:1;
    transform:none;
  }
}
@keyframes slideOutBottom{
  from{
    opacity:1;
    transform:none;
  }
  to{
    opacity:0;
    transform:translate3d(0, 100%, 0);
  }
}
.rs-anim-slide-out{
  animation-duration:0.3s;
  animation-timing-function:cubic-bezier(0.4, 0, 1, 1);
  animation-fill-mode:forwards;
}

.rs-anim-slide-in{
  animation-duration:0.3s;
  animation-timing-function:ease-in-out;
  animation-fill-mode:forwards;
}

.rs-anim-right.rs-anim-slide-in{
  animation-name:slideInRight;
}
.rs-anim-right.rs-anim-slide-out{
  animation-name:slideOutRight;
}
[dir=rtl] .rs-anim-right.rs-anim-slide-in{
  animation-name:slideInLeft;
}
[dir=rtl] .rs-anim-right.rs-anim-slide-out{
  animation-name:slideOutLeft;
}

.rs-anim-left.rs-anim-slide-in{
  animation-name:slideInLeft;
}
.rs-anim-left.rs-anim-slide-out{
  animation-name:slideOutLeft;
}
[dir=rtl] .rs-anim-left.rs-anim-slide-in{
  animation-name:slideInRight;
}
[dir=rtl] .rs-anim-left.rs-anim-slide-out{
  animation-name:slideOutRight;
}

.rs-anim-top.rs-anim-slide-in{
  animation-name:slideInTop;
}
.rs-anim-top.rs-anim-slide-out{
  animation-name:slideOutTop;
}

.rs-anim-bottom.rs-anim-slide-in{
  animation-name:slideInBottom;
}
.rs-anim-bottom.rs-anim-slide-out{
  animation-name:slideOutBottom;
}

.rs-anim-bounce-in{
  animation-name:bounceIn;
  animation-duration:0.3s;
  animation-timing-function:cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation-fill-mode:forwards;
}
@keyframes bounceIn{
  from{
    opacity:0;
    transform:scale(0.8);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.rs-anim-bounce-out{
  animation-name:bounceOut;
  animation-duration:0.3s;
  animation-timing-function:cubic-bezier(0.4, 0, 1, 1);
  animation-fill-mode:forwards;
}
@keyframes bounceOut{
  from{
    opacity:1;
    transform:scale(1);
  }
  to{
    opacity:0;
    transform:scale(0.8);
  }
}

.rs-anim-collapse{
  display:none;
}
.rs-anim-collapse.rs-anim-in{
  display:block;
}

tr.rs-anim-collapse.rs-anim-in{
  display:table-row;
}

tbody.rs-anim-collapse.rs-anim-in{
  display:table-row-group;
}

.rs-anim-collapsing{
  position:relative;
  height:0;
  overflow:hidden;
  transition:height var(--rs-anim-collapse-duration) ease, width var(--rs-anim-collapse-duration) ease, visibility var(--rs-anim-collapse-duration) ease;
}

.rs-anim-fade{
  opacity:0;
  transition:opacity var(--rs-anim-fade-duration) linear;
  pointer-events:none;
}
.rs-anim-fade.rs-anim-in{
  opacity:1;
  pointer-events:auto;
}