Transition қасиеті (свойство) CSS3
Көркем :) CSS3-ті жақсы көретін едің ғо ))) Саған арнап жазып жатырмын.
Сонымен не жазарымды білмей жүргеніме бір айдай болып қалыпты. Фотошоп жайында жалғастырайын десем, ноудбукта Фотошопым ашылмай қалды, вирус жеп қойыпты. Сосын не жазам, не жазап деп отырып, осы CSS3 тің Transition қасиеті (свойство) жайлы жазамын деп төрт ай бұрып айтыппын да сонымен ұмытып кетіппін. Соны жалғастырғалы жатырмын.
Transition қасиетінің (свойство) негізгі төрт мәні бар. Олар transition-property, transition-duration, transition-timing-function және transition-delay.
Жеке жеке:
transition-property — қай қасиетке (свойство) анимациялық өту (переход) орналытатыны жазылады.
Қабылдайтын мәндері:
transition-duration — анимация қанша уақытқа созылатыны жазылады (анимация ұзақтыңы).
Қабылдайтын мәні:
transition-timing-function — анимацияның біртіндеп өту ара қашықтығын есептеу әдісі жазылады.
Қабылдайтын мәндері:
*ощм мен мынаны түсінбеймін, сонқытқан үнсіз келісім бойынша мен ease мәмін қолданатын боламын.
transition-delay — анимация басталар алдыңдақа қанша уақытқа үзіліс жасау керек, сол жазылады.
Қабылдайтын мәні:
Негізі болды )) Бары осы ғана. Қазір мысалдармен көрсететін боламын. Код ұзақ жазылады екен деп қорықпаңдар, мына төрт мәнді бір қатарға жазуға болады қысқартып. Яғни былай жазудың орнын:
Былай бір қатарға қысқартып жазуға болады.
Алдымен HTML:
Енді CSS:
Түсіндіріп кетейін:
Мына кодтта біз былай дейміз: блок биіктігі (height ) мен ұзындығы (width ) анимациялық эффектпен өзгерілсін, және анимация ұзақтығы 1s болсын, және анимация басталар алдында 50ms тоқтап тұрсын.
Мына кодпен анимацияны «активизировать» етеміз. Яғни «ховер» оқиғасында блок биіктігі мен ұшындығы өзгерілсін деп тұр.
Міне кішігірім мысал осы.
Әр браузерге жеке жеке префикспен әдемілеп асықпай жазссаңыз, төмендегі браузерлер қолдайтын болады.
Мынау барлық исходный коды. Көшіріп, блакнотка «вставить» етіп, .html кеңейтілімінде сақтап, браузерде ашып қарай берсеіз болады.
Сонымен не жазарымды білмей жүргеніме бір айдай болып қалыпты. Фотошоп жайында жалғастырайын десем, ноудбукта Фотошопым ашылмай қалды, вирус жеп қойыпты. Сосын не жазам, не жазап деп отырып, осы CSS3 тің Transition қасиеті (свойство) жайлы жазамын деп төрт ай бұрып айтыппын да сонымен ұмытып кетіппін. Соны жалғастырғалы жатырмын.
Анықтама:
CSS3-тің жаңа мүмкіндіктері керемет деп айтсам, ештеңе айтпағанмен тең шығар. Сол керемет мүмкіндіктерідің бірі осы transition қасиеті (свойство).Transition — CSS қасиеттерін (свойство) жәймен, белгілі бір уақыт аралығында біртіндеп ауысуына мүмкіндік береді.
Transition қасиетінің (свойство) негізгі төрт мәні бар. Олар transition-property, transition-duration, transition-timing-function және transition-delay.
Жеке жеке:
transition-property — қай қасиетке (свойство) анимациялық өту (переход) орналытатыны жазылады.
Қабылдайтын мәндері:
- none — анимация болмайды.
- all — барлық қасиетке (свойство) анимация болады
- <қасиет> — жазылған қасиетке (свойство) анимация
орындалатын болады
transition-duration — анимация қанша уақытқа созылатыны жазылады (анимация ұзақтыңы).
Қабылдайтын мәні:
- <мәні> — дәл уақыт мәні жазылады. Уақыт секундпен s немесе миллисекундпен ms берілуі керек.
transition-timing-function — анимацияның біртіндеп өту ара қашықтығын есептеу әдісі жазылады.
Қабылдайтын мәндері:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier
*ощм мен мынаны түсінбеймін, сонқытқан үнсіз келісім бойынша мен ease мәмін қолданатын боламын.
transition-delay — анимация басталар алдыңдақа қанша уақытқа үзіліс жасау керек, сол жазылады.
Қабылдайтын мәні:
- <мәні> — дәл уақыт мәні жазылады. Уақыт секундпен s немесе миллисекундпен ms берілуі керек.
Негізі болды )) Бары осы ғана. Қазір мысалдармен көрсететін боламын. Код ұзақ жазылады екен деп қорықпаңдар, мына төрт мәнді бір қатарға жазуға болады қысқартып. Яғни былай жазудың орнын:
div {
transition-property:background-color;
transition-duration:5s;
transition-timing-function:ease;
transition-delay:50ms;
}Былай бір қатарға қысқартып жазуға болады.
div {
transition: background-color 5s ease 50ms;
}Тәжірибелік бөлім:
100х100px көлемді div блокқа :hover оқиғасы орындалған кезде (курсор қабылдаған кезде) div блок көлемі 200x200px-ге өзгеруі қажет.Алдымен HTML:
<div class="animate">Курсорды мында :)</div>Енді CSS:
.animate {
border: 2px dashed #03F;
width: 100px;
height: 100px;
text-align: center;
cursor: pointer;
transition: width 1s ease 50ms, height 1s ease 50ms;
/*мылжың код префикстер арқылы ну енд CSS3 қо*/
-webkit-transition: width 1s ease 50ms, height 1s ease 50ms;
-moz-transition: width 1s ease 50ms, height 1s ease 50ms;
-o-transition: width 1s ease 50ms, height 1s ease 50ms;
}
.animate:hover {
width: 200px;
height: 200px;
}Түсіндіріп кетейін:
transition: width 1s ease 50ms, height 1s ease 50ms;Мына кодтта біз былай дейміз: блок биіктігі (height ) мен ұзындығы (width ) анимациялық эффектпен өзгерілсін, және анимация ұзақтығы 1s болсын, және анимация басталар алдында 50ms тоқтап тұрсын.
.animate:hover {
width: 200px;
height: 200px;
}Мына кодпен анимацияны «активизировать» етеміз. Яғни «ховер» оқиғасында блок биіктігі мен ұшындығы өзгерілсін деп тұр.
Міне кішігірім мысал осы.
Әр браузерге жеке жеке префикспен әдемілеп асықпай жазссаңыз, төмендегі браузерлер қолдайтын болады.
- Safari 3.1 және Chrome 1 жоғары -webkit-transition.
- Opera 10.5жоғары -o-transition
- Firefox 4.0 жоғары -moz-transition
Мынау барлық исходный коды. Көшіріп, блакнотка «вставить» етіп, .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>transition</title>
<style>
.animate {
border: 2px dashed #03F;
width: 100px;
height: 100px;
text-align: center;
cursor: pointer;
transition: width 1s ease 50ms, height 1s ease 50ms;
-webkit-transition: width 1s ease 50ms, height 1s ease 50ms;
-moz-transition: width 1s ease 50ms, height 1s ease 50ms;
-o-transition: width 1s ease 50ms, height 1s ease 50ms;
}
.animate:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="animate">Курсорды мында :)</div>
</body>
</html>
15 пікір
CSS дегеніміз HTML құжаттың сырт келбетін (стильдерін) сипаттауға арналған тіл.
HTML дегеніміз логикалық белгілеу тілі. Веб парақшаларды құрғанда осы HTML тілі қолданылады (тек HTML емес, ну енд)
Ощм сайтқа CSS3 формалды тілі арқылы анимация жасау жолын көрсеттім.