Learn CSS animation in 8 minutes 🎞️

Published: 04 September 2021
on channel: Bro Code

38,197

1.4k

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

On this page of the site you can watch the video online Learn CSS animation in 8 minutes 🎞️ with a duration of hours minute second in good quality, which was uploaded by the user Bro Code 04 September 2021, share the link with friends and acquaintances, this video has already been watched 38,197 times on youtube and it was liked by 1.4 thousand viewers. Enjoy your viewing!

350