.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); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter