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;}
}
Watch video Learn CSS animation in 8 minutes 🎞️ online, duration hours minute second in high quality that is uploaded to the channel Bro Code 04 September 2021. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 38,197 times and liked it 1.4 thousand visitors.
