Css3 асослари: эффектлар, трансформация, анимация. Css3 ёрдамида html саҳифаларни таҳрирлаш

/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
Натижа

CSS анимациялар: animation-duration

animation-duration: time|initial|inherit;

div {
width: 100px; height: 100px;
background: red; position: relative;
-webkit-animation: mymove infinite; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
animation: mymove infinite;
animation-duration: 3s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
Натижа

CSS анимациялар: animation-fill-mode

animation-fill-mode: none|forwards|backwards|both|initial| inherit;

CSS анимациялар: animation-iteration-count

animation-iteration-count: number|infinite|initial|inherit;

div {
width: 100px; height: 100px;
background: red; position: relative;
-webkit-animation: mymove 3s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 2; /* Safari 4.0 - 8.0 */
animation: mymove 3s;
animation-iteration-count: 2;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {