Рестартиране на анимацията

CSS анимациите (заедно с @-webkit-keyframes) не са толкова лесни за „рестартиране“, колкото може да изглежда. Да кажем, че стартираме анимацията веднъж:

И се използва например за фирмено лого:

Това, което наистина трябва да направите, е да премахнете целия елемент от страницата и да го поставите отново. Ето прост пример за jQuery. Ние клонираме елемента, вмъкваме го преди оригинала и изтриваме оригинала.

букви
анимация

Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: css-tricks.com/restart-css-animation/ Превод: Сергей Фастунов Урокът е създаден: 14 май 2011 г. Преглеждания: 19747 Правила за препечатване

5 последни урока от категорията "CSS"

Забавни ефекти за букви

Малък ефект с интерактивна анимация на букви.

Изпълнение на забавни съвети

Малка концепция от забавни съвети, които са внедрени в SVG и anime.js. В допълнение към специален стил, примерът реализира анимация и трансформация на графични обекти.

Анимирани букви

Експеримент: анимирани SVG букви, базирани на библиотеката anime.js.

POV слънчеви очила

Страхотен експеримент на уеб страница, която се показва „от първо лице“ през слънчеви очила.

Навигация в падащо меню

Експериментален навигационен скрипт за падащо меню.