CSS Animation Direction – Reverse, Alternate and Reverse-Alternate .box { animation: pulsate_background 8s infinite; width:50px; height: 50px; margin-bottom:10px; } .reverse { animation-direction: reverse; } .alternate { animation-direction: alternate; } .alternate-reverse { animation-direction: alternate-reverse; } @keyframes pulsate_background { 0% { background-color:…
CSS Background – Pulsating background using keyframes. body { animation: pulsate_background 8s infinite; } @keyframes pulsate_background { 0% { background-color: #b7b937; } 25% { background-color: #3a5a27; } 50% { background-color: #42a5b3; } 75% { background-color: #682d4b; } 100% { background-color:…
Repeat a CSS Animation with just CSS. body { background-color: bisque; } .box { width: 100px; height: 100px; border-radius:30px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate; margin-bottom:20px;…
Repeat a CSS Animation with just CSS. .animate { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; } .circle { height: 30px; width: 30px; background-color: red; border-radius: 50%; display: inline-block; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to…
Create a CSS Animation with just CSS. p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } My slide in text See the Pen Untitled…