CSS преходи и анимации
Прогресивното развитие на HTML5 и CSS3 позволява на уеб администраторите да създават все повече и повече интерактивни уеб страници. С CSS3 Transitions и CSS3 Animations можете лесно да добавите персоналност към вашия сайт.
Съдържание:
CSS3 функция за преходи
Характеристиката на CSS3 Transitions е плавната промяна от една стойност на CSS свойство към друга. С други думи, CSS преходите ви позволяват безпроблемно да променяте от едно анимирано състояние в друго за определен период от време.
Помислете за следното маркиране:
Непрозрачност на #img: 1; свойство-преход: непрозрачност; продължителност на прехода: 2s; преходно забавяне: 0s; функция за синхронизиране на прехода: линейна; >
Какво следва от това? И ето какво. Ако преместите курсора върху изображение, то ще изчезне (свойство на прехода: непрозрачност) за 2 секунди (продължителност на прехода: 2 s), без забавяне във времето (закъснение на прехода: 0 s).

Помислете за свойствата, причиняващи преход:
- transition-property – Указва името на CSS свойството за ефекта на прехода. Ефект на преход обикновено възниква, когато потребителят задържи курсора на мишката върху елемент. Стойността по подразбиране е "всички".
- transition-duration - Определя колко секунди (s) или милисекунди (ms) са необходими за завършване на ефекта на прехода. Стойността по подразбиране е нула, което означава, че преходът е мигновен.
- transition-delay - определя кога ще започне ефектът на прехода. Стойността на забавянето на прехода се посочва в секунди (s) или милисекунди (ms). Времето може да бъде отрицателно, в който случай преходът започва наполовина от негопродължителност. Стойността по подразбиране е нула.
- transition-timing-function - задава скоростта на ефекта на прехода. Това свойство ви позволява да променяте скоростта по време на ефекта на прехода.
След това, използвайки прост пример, ще видим как избледняването на едно изображение води до появата на друго. По-долу е маркирането, което изпълнява тази задача:
#imageWrapper дисплей: inline-block; ширина: 320px; височина: 240px; box-shadow: 2px 2px 5px 0px сиво; позиция: относителна; >
#imageWrapper img width: 320px; височина: 240px; позиция: абсолютна; свойство-преход: непрозрачност; продължителност на прехода: 2s; функция за синхронизиране на прехода: линейна; >
#imageWrapper #frontImage, #imageWrapper:hover #backImage opacity: 1; >
#imageWrapper:hover #frontImage, #imageWrapper #backImage opacity: 0; >
Ето какво излезе от това маркиране:


Задръжте курсора на мишката върху изображението, за да видите CSS3 ефекта на прехода.
CSS3 функция за анимации
CSS3 анимациите са подобни на CSS3 Transitions по това, че плавно анимират CSS стойностите във времето. Разликите са (а) как се определят свойствата на анимацията, (б) как започва анимацията и (в) възможната сложност на анимацията.
Анимационният ефект се извършва с помощта на "@keyframes". Анимационният ефект позволява на елемента постепенно да се променя от един стил в друг. Можете да промените толкова стилове, колкото искате. Колкото пъти искате.
@keyframes fadeOut от непрозрачност: 1; > до непрозрачност: 0; > >
#img animation-duration : 2s ; закъснение на анимацията: 0s; функция за време на анимация: линейна; animation-fill-mode: напред; >
Много от тези свойства са познати от обсъждането на преходите. Нови са:
- animation-fill-mode – Стойността за пренасочване казва на браузъра да спре анимацията на последния кадър след последното повторение и да не я превърта назад до първоначалното й състояние.
- animation-name - указва името на ключовия кадър, който искате да свържете със селектора.
- animation-timing-function - определя скоростта на анимацията. Кривата на скоростта определя времето за анимация, което се използва за преход от един набор от CSS стилове към друг. Използва се за плавна промяна на скоростта.
Това, което прави CSS3 анимацията различна, е способността да се дефинират множество ключови кадри, чрез техните свойства и междинни стойности, които не трябва да остават в рамките на началната и крайната стойност. В CSS3 преходите междинните стойности винаги напредват от началото до края, те никога не надхвърлят този диапазон. Анимацията няма това ограничение.
Това ви позволява да програмирате ефекти като маркирането и примера по-долу:
#bouncingШирина на изображението: 320px; височина: 240px; box-shadow: 2px 2px 5px 0px сиво; продължителност на анимацията: 2 секунди; функция за синхронизиране на анимация: леко влизане и излизане; animation-fill-mode: напред; >
#bouncingImage:име на анимация при курсора: zoomInBounce; >
@keyframes zoomInBounce от трансформация: мащаб(1); >
40% трансформация: мащаб (1.15) ; >
50% трансформация: мащаб (1.35) ; >
80% трансформация: мащаб (1,225) ; >
90% трансформация: мащаб (1,275); >
Задръжте курсора на мишката върху изображението, за да видите ефекта.
