Как анимировать элемент с помощью свойства анимации?

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;
`;```