.element { animation: pulse 5s infinite; } @keyframes pulse { 0% { background-color: #001F3F; } 100% { background-color: #FF4136; } } // Another One .element { height: 250px; width: 250px; margin: 0 auto; background-color: red; animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; } @keyframes stretch { 0% { transform: scale(.3); background-color: red; border-radius: 100%; } 50% { background-color: orange; } 100% { transform: scale(1.5); background-color: yellow; } } body, html { height: 100%; } body {
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