.line { position: absolute; border-radius: 1em; animation-duration: 1s; transition: transform 1s linear; } .line-wide { transform: scaleX(1); animation-name: change-width; } .line-high { transform: scaleY(1); animation-name: change-height; } @keyframes change-width { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes change-height { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }