Можно ли с помощью связки transition и transform несколько раз изменить цвет фона за некоторое время?
Доброго дня.
Есть некоторый div. Необходимо задать ему вращение на 360 градусов, при этом он должен менять цвет фона следующим образом:
В начале вращения он, например, синий, в середине (через 180 градусов), он красный и в 360 снова синий.
Можно ли это сделать не используя анимацию, т.е. только через transform и transition?
P.S. Если вы ещё знаете способ, как этот процесс зациклить без JS и CSS анимации, то тоже не плохо.
Знаю, что можно задать rotate(3600deg), например, но он всё равно закончится.
Люди! Я не волшебник, я только учусь.
Как это сделать с помощью анимации - я знаю. Просто решил спросить, есть ли альтернативный способ.
Я реально учусь и мне надо сдать работу на проверку, я её сделал и так, и этак.
С анимацией я её зациклил, а без анимации сделал по наведению на 1 полное вращение.
Вы из клуба садо-мазо любителей усложнить себе жизнь в вебе? Что за попытка накинуть себе трудностей, или это такой вид изучения - изучить не изучаемое?
Я пока придумал задать угол вращения 3600 или больше....
а вот для изменения цвета придумал задать блоку два класса.
В первом классе transition: 12s linear и в нём прописать изменение цвета фона.
Во втором классе прописать задержку в 12s и так же менять цвет фона.
Но это только для 1 оборота(((
Виталий, Вы хотя бы пожалейте ваших с коллег с форума, и заливайте то, что у вас получилось на codepen. А то гадать пальцем в небо никто не будет вместе с вами.
Руководитель frontend направления, предприниматель
Нет, используй конечную (не бесконечную) анимацию. И вызывай ее с флагом направления в разных случаях, если тебе надо, чтобы чтобы например при наведении было то, что ты описал, а при снятии события наведения возвращалось в обратном порядке. Все это есть в документации.
ЗЫ: нуссс, вообще можно костылей приделать. Скажем внутри задать псевдоэлемент в размер родителя, полностью прозрачный красный и с задержкой анимировать его появление. Но яйцо выделки не стоит, как по мне.
ЗЫ: нуссс, вообще можно костылей приделать. Скажем внутри задать псевдоэлемент в размер родителя, полностью прозрачный красный и с задержкой анимировать его появление. Но яйцо выделки не стоит, как по мне.
Я бы тогда пошел бы грузчиком работать, а не во фронтенд. Так усложнять тривиальные задачи, это не про программирование. Так что тут вы правы, яйцо выделки не стоит.
approximate solution, разметка это вообще не про программирование.
Тем не менее если здесь это неуместно, то в другом месте умение нестандартно подойти к решению ситуации поможет сохранить здравый рассудок, а порой и сэкономить вычислительные мощности.
Арсений Матыцин, Поверьте, разметку тоже можно засрать так, что выше DOM дерево попросит оптимизации на prod. Так что в IT, в любой сфере - чем проще и понятнее другим людям, тем лучше. Писать костыли можно при налии в вебе инструмента практически для всего - моветон.
