CSS ?????? @keyframe? ??? ? ???? ??? ??? ????. 1. ?? ??, 2. ? ???? ????? ?? ?? ??? ??, 3. ?? ? ????? ??, 4. ? ???? ??, 5. ?? ??, 6. ???? ?? ??; ??? ??? ??? ???? ????? ??? ?? ? ????.

@keyframes? ???? CSS ?????? ??? ??? ?? ???? ??? ???? ???? ?? ??? ? ???? ???????. ??? ?? ??? ???? ??? ???? ???? ??? ????, ? ???? ?? ??? ??? ?????.

@KeyFrames? CSS? ??? ??? ??? ??? ?? ??? ????? ???? ?? ? ? ????. ??? ??? ? ??? ?? ?? ???? ?? ???, ??? ?????? ???? ??? ?? ? ? ????. ?????? ???? ???? ???? ??? ??? ????.

??? ? ? ????? ??? ?????? ????? ???????. @keyframes ??? ????? ???? ?????. ???? ??? ?????.

1. ??? ??

?? ?? ?? ? ??? ??? ???? ??? ????. ????? ??? ???? ?? ??? ?? ???? ???? ?? ????. @keyframes??? ?? ?? ??? ?????.

 @keyframes ?? {
    0% {
        ?? : ??? (1);
    }
    50% {
        ?? : ??? (1.1);
    }
    100% {
        ?? : ??? (1);
    }
}

??? ??? ?????. ??? ?? ?? ???? ?? ???? ????? ????? ???? ?????? ??? ? ????. ?? ???? ??? ??? ?? ????.

2. ??? ? ??? ? ????? ??

? ?? ???? ??? @keyframes? ?? ? ??? ??????? ??? ???? ?? ????. ??? ??? ?? ???? ??? ?? ????.

 @keyframes fadein {
    0% {
        ???? : 0;
    }
    100% {
        ???? : 1;
    }
}

/ * ??? ?? */
.?? {
    ????? : Fadein 2s;
    ?? : ??? (1.5); / *? ??? ? ???? ???? ?? ???? */
}

? ?? transform ??? @keyframes? ???? ?? ??? ??????? ????. ? ??? ? ????? ??? ????? ??? ??????.

3. ????? ?? ??

??? @keyframes? ???? ?? ? ? ??? ??? ?????? ??? ???? ?? ?? ????. ??? ??? ??? ?? ???? ?? ??? ????? ?? ???? ????.

 @keyframes slidein {
    ?? {
        ?? : translatex (-100%);
    }
    ?? {
        ?? : translatex (0);
    }
}

/ * ????? ?? ?? */
.?? {
    /* ????? : Slidein 1s; *// *??? ?? ?? */
}

?? animation ??? ???? @keyframes? ??? ???????.

4. ??? ? ???

??? ???? ?? ? ???? ???? ??? ?? ??? ??? ? ????. ??? ??? ? ?? ?? ??? ???? ?? ????.

 @keyframes Colorchange {
    0% {
        ??? : ???;
    }
    50% {
        ??? : ???;
    }
    50% {
        ??? : ??; / * ??? ???? ????? */
    }
    100% {
        ??? : ???;
    }
}

? ??? ??? 50% ? ???? ???? ???? ??? ??? ?????. ? ???? ???? ??? ??? ??????.

5. ?? ??

?????? ?? ?? ??? ???????? ??? ? ???? ???? ?? ??? ??? ? ? ????. ??? ??? ???? ? ??? ?? ??? ???? ?? ????.

?? ??? ????? will-change ???? ????? ?? ??? ?? ?? ???? Box-Shadow ?? ??? ??? ?? ??? ????? ??? ??? ????.

 .?? {
    ?? ?? : ??, ????;
    ????? : Fadein 2s;
}

6. ???? ???

?? ????? ?? ???? @keyframes, ?? ?? ??? ???? ?? ????. ??? ??? ?? ? ???? ???? ?? ?? ??? ???? ?? ????.

??? ???? ???? ????? ?? ?? ???? ??????.

 @keyframes fadein {
    ?? {
        ???? : 0;
    }
    ?? {
        ???? : 1;
    }
}

@-webkit-keyframes fadein {
    ?? {
        ???? : 0;
    }
    ?? {
        ???? : 1;
    }
}

.?? {
    ????? : Fadein 2s;
    -webkit-Animation : Fadein 2s;
}

??? ?? ?? ??

@keyframes?? ???? ???? ?? ????? ?? ???????. ??? ?????? ????? ??? ???? ????. ??? ??????? ???? ? ?? ??? ?? ?? ???? ??????.

? ?? ?? CSS ????? ??? ?? ??? ?? ??? ?? ??? ???? ? ???? ???? ?? ???? ????. ????? ?? ??? ??? ?? ? ? ????.

?????

@keyframes? ??? ???? ?? ??? ? ??? ??? ???? ??? ??? ??? ???? ???? ??? ?????? ?? ? ????. ?? ??? ?? ????? ??? ?? ?? ?? ?????? ???????!

? ??? @KeyFrames CSS? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!