Анимация с помощта на промени в CSS

Анимация с помощта на промени в CSS

Примери ще работят в Firefox, Chrome, Safari и Internet Explorer 10. За съжаление, в по-стари браузъри, няма да видите тези ефекти и промени или трансформация ще се случат без анимация.

Анимации, които ще видите в този урок цикъл ще отговорят на някои събитие, като показалеца на мишката. Това е, когато се движите съответната функция се нарича, и се превръща в предварително определен период от време.

Браузър Firefox и Opera подкрепа сега се превръщат в почти идентична синтаксис. Ние просто трябва да се използват подходящи префиксите -moz-. -о и -webkit-.

Internet Explorer 10-секундна версия поддържа преходи свойства без префикс. Но за предварителен преглед версия на IE10 -ms- трябва да използвате префикс.

За всички съвременни браузъри работят преходи, използвайте следните представки:

И за преобразуване:

  • -WebKit-преход
  • -Moz прехода
  • -MS-преход
  • преход

Ние пропуснете префикс -o. защото сега Opera признава WebKit свойства.

статично превръщане

CSS преобразуване ви позволи да промените външния вид на елемента, да го включите и да предизвика по ИТ други операции. За да видите анимацията, което трябва да се уверите, че анимацията се случва в отговор на някои потребителски движение. Така например, ако задържите показалеца на мишката върху всеки елемент. В противен случай, се показва на страницата и елементите ще бъдат в крайното състояние (имам предвид след конверсия) и процеса на реализация (анимация) и няма да видите.

Това е показано в следния пример:

го плъзнете наляво нагоре.