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;}
}