CSS3те анимация жасау (Javascript-сіз)

CSS3 тің жаңа мүмкіндіктері сонша көп, тіпті оларды меңгеріп үйрене де алмай жатырмын. Бүгінгі постта 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 пікір

Abylai
қолдау тиімді деп жазбадым. жәй css3 тің жаңа мүмкіндіктерін осы бастан үйрене берген абзал. ілесе алмай қалуымыз мүмкін.

болашақта барлық браузер css3 пен html5тці қолдаса жақсы болар еді. джейкуери аздап жалықтырды
Abylai
)) көп сөзге жоқ едім негізі, тақырыпқа қатысты дискуссия болса өзімдікін қорғаштаймын ғо бірақ ))

джаваскриптке әнгіме жоқ. тұрған сиқыр ғо )) бірақ CSS3 әп әдемі )))
Jako
Сендердің әңгімелеріңді тыңлап отырсам түк түсінбегендіктен жат елдіктермен отырғандай боламын.
Abylai
ағасы интернетті меңгерген екенсіз, енді программа, сайт құруға қаай қарайсыз? (сіздің қолыңыздан келетініне сенемін)
Jako
Ниетім бар, Абылай.Қауашағы құрғыр қақпайды.
Abylai
ниет болса, басқасы кедергі емес )) сіз үшін ең басынан бастап жазып көрейін келесі постта
Jako
Шынымен тамаша болар еді, Абылай.Мен тырысып көремін, бірақ ол аздық етпесе.
MSHERIMBEK
Ой, сен де, прогер:)
Abylai
иә? )) айта бер
MSHERIMBEK
Мен Мзафарға бағыттап едім, негізі:) Сенің еңбегіңнің өтемі жоқ қой:) Тіпті, мыналар үшін қалай алғыс айтуды білмей отырмын:)
Abylai
анда санда + қойсаң жетіп жатыр ;)
KILYZAMAN
Осылай, осылай ақырындап басып — жәп жақсы құнарлы ортаның іргесі құрылатын сияқтыма өзі? ;-)
Arhun
шынымды айтсам түк түсінген жоқпын, бірақ осындай постарың бар болса жаза бер =)
Abylai
)) қазір толық анықтамасын жазып жатырмын. үлгерсем бүгін жариялаймын.
AL-ASTER
Рахмет, амиго дегеннен басқа айтар жоқ.
calendula
Сен «амиго»-дан басқа ештеңе айтпайсың ғооой)))
Тек тіркелген қолданушылар ғана пікір қалдыра алады.