CSS Преходите ви позволяват плавно преминаване от едно състояние в друго елемент. Тя работи така, че отделните имоти са анимирани на първоначалното състояние до края.
Можете да определите:
- преход-собственост. кои свойства са анимирани;
- преходен продължителност. колко време анимацията;
- преходен времето-функция. като междинни съединения изчислява състояние;
- преходен забавяне. анимация започва след известно време.
Можете да настроите всеки CSS имот поотделно или да използвате съкратения вариант: преход. В този случай, само на прехода, продължителността е задължително.
Имайте предвид, че преходът е специфичен vidanimatsii. където има само началната и крайната държавата.
Един бърз пример
Преходите често се използват за състоянието: мишката.
Вместо това, мигновени прилагане на правилата на CSS мишката фон и текст промяна на цвета бавно.
преходен продължителност
преход продължителност е единственият стил свойства, необходими за създаването на прехода. Той може да се монтира в секунда (2S), или в милисекунди (100ms).
Ако искате да направите своя преход трае половин секунда. можете да напишете 0.5s или 500ms. В зависимост от това колко бързо искате да преход продължи, тя може да бъде по-лесно и / или напише една единица по-бързо.
преход-имот
Само една трета от CSS свойства могат да бъдат анимирани. На сайта на Mozilla е пълен списък на имотите.
По подразбиране, свойствата на прехода имот стойност на всички. това просто означава, че те ще анимирате всички възможни свойства.
Можете да активирате анимацията само едно или повече свойства.
граничен имот е напълно анимирани и го прави лесно да се наблюдава бавен преход (2 секунди).
преходен времето функция
функция на времето определя как да се изчисли стойността на всеки имот по време на прехода.
Преходът по подразбиране е равен лекота. то ускорява и забавя в началото на края.
Може да решите, че преходът ще се случи с постоянна скорост. функция на времето може да ускори или забави прехода.
Най-лесният начин да се визуализира в зависимост от времето е да се промени за позициониране свойства. като си тръгна.
Имайте предвид, че всички преходи да вземат едно и също време (1 секунда).
Ако искате да получите представа за това как други функции работят време, погледнете този мамят лист.
кубичен-Безие
Ако всички тези готови функция на времето не е подходящо, можете да напишете своето собствено използване на Безие криви.
cubic-bezier.com сайт - е лесен инструмент за визуално писмено собствените си криви.
преходен забавяне
преход забавяне определя д. забавяне, т. колко време на прехода трябва да почака. преди да започнете действително.
Както с преходен продължителност, може да се използва втори (и) или милисекунди (MS).
Свързани статии