2. Transitions
Използвайки “transition” свойството на CSS можем
да преминем от едно свойство към друго гладко.
За целта трябват 2 неща
• CSS свойството върху което да добавим ефекта
• времето нужно за изпълняване на този ефект
Пример :
transition: width 2s;
2
3. Transition-timing-function
Тази функция дефинира скороста на ефекта. Тя
може да има следните стойности :
• ease – бавен старт, бързо продължение, бавен край
(по-подразбиране)
• linear – еднаква скорост от начало до край
• ease-in – бавно начало
• ease-out – бавен край
• ease-in-out – бавно начало и край
3
4. Transition Delay
За да добавим забавяне в ефекта ни можем да
използваме функцията “transition-delay”.
Чрез нея можем да изберем време (в секунди) с
което да се забави желаният ефект.
Пример :
transition-delay: 1s;
В случея добавяме забавяне от 1 секунда към вече
зададеният ефект.
4
5. Transition + Transformation
Възможно е в едно свойство да добавим както и
“transition” така и “transformation”.
Това може да се постигне като добавим нужната
стойност в дефиницията на “transition”
Пример :
transition: width 2s, height 2s, transform 2s;
5
6. Кратък запис на “transition”
Краткият запис съдържа следните 4 опции :
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
Същите 4 опции могат да бъдат записани по този начин
transition: width 2s linear 1s;
6
7. Анимации чрез CSS
За да направим една анимация чрез CSS трябва да
направим следните неща
1. В избрания елемент да зададем “animation-name:
someName” за да можем да го ползваме след
това.
2. Трябва да се зададе време на изпълняване на
дадената анимация с “animation-duration : 3s;”
3. Като вече имаме име използваме “@keyframes
someName” като селектор за да добавим
стойностите на анимацията.
7
8. @keyframes
След като вече имаме избрана анимация в
“@keyframes” имаме избора да дефинираме
началото и края на анимацията с “from & to” или
чрез избрани проценти, примерно “0%, 25%, 50%,
75%, 100%”
• @keyframes someName {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
• @keyframes someName {
from {background-color: red;}
to {background-color: yellow;}
}
8
9. Animation-delay and
iteration-count
За да добавиме забавяне в дадена анимаця е
нужно да добавиме свойството :
animation-delay : 3s;
По същия начин за да дефинираме колко пъти ще
се повтори избрана анимация е нужно да добавим
свойството :
animation-iteration-count: 3;
Освен номер за брой можем също така да
използваме “infinite” за независимо продължаване
на анимацията.
9
10. Animation-direction
За задаване на посока на избрана анимация се
използва :
animation-direction
Тук имаме две опци:
• reverse – обръща посоката на анимацията
• alternate – променя посоките през една
10
11. Бързина на анимация
Както с “transition” така и тук имаме избор от
същите опции за времетраенето на анимацията.
Използвайки функцията “animation-timing-function”
със следните опции :
• ease – бавен старт, бързо продължение, бавен край
(по-подразбиране)
• linear – еднаква скорост от начало до край
• ease-in – бавно начало
• ease-out – бавен край
• ease-in-out – бавно начало и край
11
12. Кратък запис на
анимацията
Краткият запис съдържа следните 6 опции :
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
аnimation-iteration-count: infinite;
animation-direction: alternate;
Същите 6 опции могат да бъдат записани по този
начин
animation: example 5s linear 2s infinite alternate;
12
