Learn CSS animation in 8 minutes 🎞️

CSS animation tutorial example explained #CSS #animation #tutorial #box1{ width: 250px; height: 250px; background: red; font-size: 225px; text-align: center; /* animation: mySlide; animation-play-state: running; animation-iteration-count: infinite; animation-delay: 0s; animation-timing-function: linear; animation-duration: 5s; */ animation: 3s linear 0s infinite running mySlide; } #box1:hover{ } #box1:active{ } @keyframes mySlide{ from{margin-left: 100%;} to{margin-left: 0%;} } @keyframes myRotate{ /*100%{transform: rotateX(360deg)}*/ /*100%{transform: rotateY(360deg)}*/ 100%{transform: rotateZ(360deg)} } @keyframes myOpacity{ 50%{opacity: 0;} } @keyframes myScale{ 50%{transform: scale(0.5, 0.5);} } @keyframes myColorChange{ 0%{background-color: red;} 20%{background-color: orange;} 40%{background-color: yellow;} 60%{background-color: green;} 80%{background-color: blue;} 100%{background-color: purple;} }