animation-direction?
Давайте предположим, что у вас есть CSS анимация для background-color, которая меняет цвет от желтого (#cc0) к голубому (#079) в бесконечном цикле. Код для этого может выглядеть примерно так:
@keyframes color {
from { background: #cc0 }
to { background: #079 }
}
div {
animation: color 3s infinite;
}
Представим последовательность анимации в линейном виде (на рисунке три итерации):
Я думаю, что вы уже видели, анимированные меню с эффектом LavaLamp (на основе плагина JQuery). Сегодня я хотел бы вам рассказать, как повторить то же поведение только на чистом CSS3 (без JavaScript). В нашем меню я буду использовать CSS3 transitions (для анимации элементов). Итак, если вы готовы, давайте начинать.
В школе я ненавидел математику. Мне она казалась надоедливой, сухой и скучной штукой с кучей старых книг, решающих очень теоретические проблемы. Даже хуже, многие задачи повторялись, с простым логическим изменением в каждой итерации (деление чисел, дифференциалы и т.д) Именно поэтому мы и придумали компьютеры. Достаточно сказать, что очень много домашних заданий по математике сделал мой старый верный Commodore 64 и Basic. Мне же оставалось просто скопировать результаты.
Эти инструменты и несколько уроков геометрии вдохновили меня сделать математику интересной для себя. Я сделал это в первую очередь путем создания визуальных эффектов, которые следуют правилам математических правил в демо, заставках и других, казалось бы бессмысленных вещах.