CSS Animation - bar

<div class="bar"></div>

body {
  height: 100vh;
  /* vh는 화면 크기에 따라 높이값이 다르기때문에 100등분을 했다고 이해하면된다. */
  background-image: linear-gradient(to top, #ff758c 0%, #ff7eb3 100%);
}
.bar {
  width: 5px; height: 400px; background: #fff;
  position: absolute;
  left: 0; top:0; right: 0; bottom: 0;
  margin: auto;
  animation-name: bar;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 100;
}

/* @keyframes bar {
  0%   {transform: rotate(0deg)}
  100% {transform: rotate(180deg)}
} */

@keyframes bar {
  0%   {transform: rotate(0); height:0;}
  25%  {transform: rotate(0); height: 400px;}
  50%  {transform: rotate(180deg); height: 0;}
  100% {transform: rotate(360deg); height: 300px;}
}