如何使用动画属性为元素设置动画？

Question

我有一个元素是其容器高度的80％，我需要将其动画化为100％。我该如何实现？

const slideInOrOut = isSlideIn => keyframes`
  from {
    -webkit-transform: translate3d(0, ${isSlideIn ? '100%' : 0}, 0);
    transform: translate3d(0, ${isSlideIn ? '100%' : 0}, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, ${isSlideIn ? 0 : '100%'}, 0);
    transform: translate3d(0, ${isSlideIn ? 0 : '100%'}, 0);
    visibility: hidden;
  }
`;

const Container = styled.div`
  height: 80%;
  width: 90%;
  padding: 0 5%;
  overflow: hidden;
  overflow-y: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: ${({ theme }) => theme.colors.shades[7]};
  box-shadow: 0 -3px 9px 0 rgba(0,0,0,0.08);
  animation: ${props => slideInOrOut(props.isSlideIn)} ease ${props => props.duration}s;
`;```