Html transitions & animations

1. HTML
Transitions &
Animations
БОЯН ИВАНОВ

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

13. Благодаря Ви за
вниманието.
Въпроси?