CSS3те анимация жасау (Javascript-сіз)
CSS3 тің жаңа мүмкіндіктері сонша көп, тіпті оларды меңгеріп үйрене де алмай жатырмын. Бүгінгі постта CSS3-те ешқандай джаваскриптсіз анимация жасау жолын қысқаша көрсететін боламын. Алдағы уақытта осы тақырыпта толықтай тоқталамын.
сонымен код
мысал ретінде созылып тұратын мәтінді қалай жасау жолын көрсетемін (қарапайым мысал)
бірінші бізге керегі HTMLда код:
енді CSS3 те анимация жасаймыз код:
енді кейфрейммен анимацияны шақырамыз
түсінбеген жерлеріңіз болса бірден шошымаңыз, қиын ешнәрсесі жоқ, алдағы уақытта осы анимация тақырыбына бірнеше пост арнап жеке жеке тоқталатын боламын
және ескерту бұл анимация хром, сафари, файрфокстың соңғы нұсқаларында нәп нәрмальні жасап түр, егер анимация жасамай тұрса онда кінә сіздің браузеріңізден
мынау толық исходный коды
сонымен код
мысал ретінде созылып тұратын мәтінді қалай жасау жолын көрсетемін (қарапайым мысал)
бірінші бізге керегі HTMLда код:
<span class="amin_1">Созылмалы мәтін =)</span> //осы жәрәйді )))
енді CSS3 те анимация
.anim_1 {
font-size: 14px;
animation-name: 'anime_1'; /* анимация аты кейфрейммен шақырғанда керек болады */
animation-duration: 600ms; /* анимация жылдамдығы */
animation-iteration-count: infinite; /* қайталану реті (біздің мысалда шексіз қайталанады)*/
animation-direction: alternate; /* анимация басынан аяғына дейін, және кері қарата қайталанады */
/* былайша код болды бірақ біздің анимация кроссбраузерлы болуы үшін әр браузер ядросына арнайы бөлек бөлек жазып шығамыз */
-webkit-animation-name: 'anime_1';
-webkit-animation-duration: 600ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
/* хром мен сафари браузері үшін */
-moz-animation-name: 'anime_1';
-moz-animation-duration: 600ms;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
/* мозилла үшін */
}
енді кейфрейммен анимацияны шақырамыз
@keyframes 'anime_1' { /* анимацияны кейфрейммен шақырамыз аты арқылы*/
from {
letter-spacing: 0px; /* анимацияны басы мәтін арасы ноль пиксель*/
}
to {
letter-spacing: 10px; /* анимацияны соңында мәтін арасы он пиксель*/
}
}
/* осымен код бітті бірақ басқа браузерлерді де ренжітіп алмас үүшін косымша мылжың код */
@-webkit-keyframes 'anime_1' {
from {
letter-spacing: 0px;
}
to {
letter-spacing: 10px;
}
}
@-moz-keyframes 'anime_1' {
from {
letter-spacing: 0px;
}
to {
letter-spacing: 10px;
}
}
бооолды мысалын мына жерден қарай аласыз hosting.users.kz/css3.html
түсінбеген жерлеріңіз болса бірден шошымаңыз, қиын ешнәрсесі жоқ, алдағы уақытта осы анимация тақырыбына бірнеше пост арнап жеке жеке тоқталатын боламын
және ескерту бұл анимация хром, сафари, файрфокстың соңғы нұсқаларында нәп нәрмальні жасап түр, егер анимация жасамай тұрса онда кінә сіздің браузеріңізден
мынау толық исходный коды
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
.anim_1 {
font-size: 14px;
animation-name: 'anime_1'; /* анимация аты кейфрейммен шақырғанда керек болады */
animation-duration: 600ms; /* анимация жылдамдығы */
animation-iteration-count: infinite; /* қайталану реті (біздің мысалда шексіз қайталанады)*/
animation-direction: alternate; /* анимация басынан аяғына дейін, және кері қарата қайталанады */
/* былайша код болды бірақ біздің анимация кроссбраузерлы болуы үшін әр браузер ядросына арнайы бөлек бөлек жазып шығамыз */
-webkit-animation-name: 'anime_1';
-webkit-animation-duration: 600ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
/* хром мен сафари браузері үшін */
-moz-animation-name: 'anime_1';
-moz-animation-duration: 600ms;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
/* мозилла үшін */
}
/*енді кейфрейммен анимацияны шақырамыз */
@keyframes 'anime_1' {
from {
letter-spacing: 0px;
}
to {
letter-spacing: 10px;
}
}
/* осымен код бітті бірақ басқа браузерлерді де ренжітіп алмас үүшін косымша мылжың код */
@-webkit-keyframes 'anime_1' {
from {
letter-spacing: 0px;
}
to {
letter-spacing: 10px;
}
}
@-moz-keyframes 'anime_1' {
from {
letter-spacing: 0px;
}
to {
letter-spacing: 10px;
}
}
</style>
</head>
<body>
<span class="anim_1">Созылмалы мәтін =)</span>
</body>
</html>
16 пікір
болашақта барлық браузер css3 пен html5тці қолдаса жақсы болар еді. джейкуери аздап жалықтырды
джаваскриптке әнгіме жоқ. тұрған сиқыр ғо )) бірақ CSS3 әп әдемі )))