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

Watch video Learn CSS animation in 8 minutes 🎞️ online without registration, duration hours minute second in high quality. This video was added by user Bro Code 04 September 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 38,197 once and liked it 1.4 thousand people.

4,196