Анимации вп CSS€¦ · Box-shadow Text-shadow Атрибути за ефект на...
Transcript of Анимации вп CSS€¦ · Box-shadow Text-shadow Атрибути за ефект на...
Анимации вп CSS
Анимација
• Транзиција пвпзмпжува ублажуваое на прпмената на вреднпстите на изранипт CSS вп пдреден временски перипд на тпј начин штп ппстепенп се менуваат вреднпстите на свпјствата на стилпт
• Анимација се заснива на прпмена на свпјствата на некпј елемент вп текпт на времетп медутпа пвпзмпжува ппдпбра кпнтрпла и има дппплнителни специфичнпсти
Уредуваое на веб страници-Наце Будпни 2
Анимација
• Не мпже сите атрибути(свпјства) штп се кпристат вп CSS да се анимираат
• Дел пд атрибутите кпи мпжат да се анимираат е зададен какп табеларен приказ на следнипт слајд.
Уредуваое на веб страници-Наце Будпни 3
Анимација Атрибут Опис
Color Font-size Font-weight Text-indent Letter-spacing Word-spacing
Атрибути за текст и фпнт
background Бпја,гплемина и ппзиција на ппзадина
Box-shadow Text-shadow
Атрибути за ефект на сенка
Width Height
Димензии на елементи
Margin Padding
Атрибути за внатрешна и надвпрешна маргина
Уредуваое на веб страници-Наце Будпни 4
Анимација
border Боја,дебелина и заобленост на граничната линија
outline Бпја и дебелина на рамка
Top Left Bottom right
Атрибути за ппзиципнираое на елементпт
Transform perspective
Атрибути за трансфпрмација на елементпт
Opacity Visibility
Атрибути за прпвиднпст и видливпст на елементпт
Уредуваое на веб страници-Наце Будпни 5
Атрибути за анимација
1. Animation-delay(дпцнеое на ппчетпкпт на низата анимации пд мпментпт кпга ќе се вчита елементпт)
2. Animation-direction(дали анимацијата менува наспка на секпе стартуваое или се ресетира и ппвтпрува пд ппчетпк)
3. Animation-duration(времетраеое на еден циклус на анимацијата)
4. Animation-iteration-count(кплку пати анимацијата ќе се ппвтпрува)
Уредуваое на веб страници-Наце Будпни 6
Атрибути за анимација
5. Animation-name(име на анимацијата кпе треба да биде истп сп иметп на @keyframes правилптп кпе истп така е спставен дел на анимацијата
6. Animation-play-state(пвпзмпжува запираое и прпдплжуваое на анимацијата)
7. Animation-timing-function(гп ппишува анимиранипт премин низ клучните рамки на анимацијата)
8. Animation-fill-mode(пдредува кпи вреднпсти се дпделени на анимацијата пред и ппсле завршуваоетп)
Уредуваое на веб страници-Наце Будпни 7
@keyframes правило
• Правилптп гп ппределува иметп на анимацијата и низа пд правила вп гплеми загради сп кпи се дефинира целата анимација
• Овие таканаречени клучни рамки кпристат прпценти за да дефинираат вп кпе време ќе се прикажува пдреден дел пд анимацијата
• 0% и 100% мпжат да се заменат сп from и to
• Клучните рамки мпра да бидат спртирани пп растечки редпслед вп пднпс на прпцентите,а акп некпи се преклппуваат ќе се реализираа пнаа рамка кпја е ппследна наведена
Уредуваое на веб страници-Наце Будпни 8
Animation-duration
• Гп дефинира времетраеоетп на еден циклус на анимацијата
• Иницијалната вреднпст е 0s
Уредуваое на веб страници-Наце Будпни 9
Animation-timing-function -Linear (транзиција сп кпнстантна брзина)
-Ease-in (сппрп забрзуваое, брз завршетпк)
- ease-out(брз ппчетпк, сппр завршетпк)
- Ease-in-out(симетричнп забрзуваое и забавуваое)
- Ease (истп какп претхпднптп сп тпа штп транзицијата наглп забрзува на ппчетпк, а бавнп усппрува на крај)
- Step-start(веднаш скпкне на крајпт пд транзицијата и не се менува)
- Step-end (вп целптп траеое ја прикажува ппчетната фаза а дури на крај скпка на завршетпк пд транзицијата)
Уредуваое на веб страници-Наце Будпни 10
Animation-direction
- Normal (пд дефиниранипт ппчетпк па се дп крај
- Reverse (пд крајпт кпн ппчетпкпт)
- Alternate (првп нпрмалнп дп крај а пптпа reverse дп ппчетпкпт)
- Alternate-reverse (првп наназад дп ппчетпкпт,а пптпа нанапред дп крајпт)
Уредуваое на веб страници-Наце Будпни 11
Animation-iteration-count
• Брпја на циклуси на самата анимација
• Иницијалната вреднпст е 1
• Мпже да се зададе и билп кпј друг брпј
• Мпжна вреднпст е и infinite(бескпнечнп)
Уредуваое на веб страници-Наце Будпни 12
Animation-fill-mode
- None (елементпт е ппставен на негпвптп стандарднп местп пред ппчетпк на анимацијата и се враќа на тпа местп ппсле завршуваое на анимацијата)
-forwards (елементпт пстанува на местптп дефиниранп какп крај на анимацијата)
- Backwards (местптп на елементпт ке се примени пред стартуваое на анимацијата)
- Both (анимацијата ке ги примени и forwards и backwards)
Уредуваое на веб страници-Наце Будпни 13
Комплексен атрибут animation • Целата анимација мпже да се дефинира и сп
самп еден кпмплексен атрибут animation.
• Тпј вп себе треба да ги спдржи следните свпјства пднпснп нивни вреднпсти:
- animation name
- duration
- animation-timing-function
- animation-delay
- animation-iteration-count
Уредуваое на веб страници-Наце Будпни 14
Комплексен атрибут animation - animation-direction
-animation-fill-mode
Уредуваое на веб страници-Наце Будпни 15
Вежба1
Уредуваое на веб страници-Наце Будпни 16
Вежба2
Уредуваое на веб страници-Наце Будпни 17
Вежба3
Уредуваое на веб страници-Наце Будпни 18
Вежба4
Уредуваое на веб страници-Наце Будпни 19
Вежба5
Уредуваое на веб страници-Наце Будпни 20
Проф.Ставревски Ненад
Уредуваое на веб страници-Наце Будпни 21