Я пытаюсь изменить цвет текста при наведении с несколькими переходами цвета, но я могу изменить только один цвет. Вот мой фрагмент CSS.Как иметь несколько переходов цвета CSS на одной текстовой строке?
#text {font:9px 'Arial'; color:#000000; transition-duration: 3s;}
#text:hover {color:#FFFFFF;}
Не только #000000 к #FFFFFF, но #000000 → #FF0000 → #0000FF → #FFFFFF
Как иметь несколько CSS цветовые переходы на одной текстовой строке?
Вам необходимо использовать CSS Animations, которые позволяют использовать ключевые кадры для определения нескольких изменений состояния.
Ваш пример будет выглядеть следующим образом:
#text:hover {
animation: 3s multicolor;
}
@keyframes multicolor {
0% {
color: #000;
}
33% {
color: #FF0000;
}
66% {
color: #0000FF;
}
100% {
color: #FFF;
}
}
Вот demo fiddle, который включает -webkit префикс (опущена в ответ для краткости)
Спасибо! Но у меня проблема. Если я его отпущу, он мгновенно восстановится. Как это исправить? –
@ user2190490 это не поддерживается во многих браузерах, но javascript это – K3rnel31
Я бы предложил проверить анимационные ключевые кадры для анимации CSS. Вы можете указать состояние своего текста в любой момент времени (в этом случае укажите цвет текста). W3 Schools имеет больше информации по этому вопросу, посмотрите здесь: http://www.w3schools.com/css/css3_animations.asp
, что именно вы хотите, чтобы произошло? Я предполагаю, что это то, что вы получили в настоящее время. – kalley
Возможный дубликат [Как иметь несколько переходов CSS в элементе?] (Http://stackoverflow.com/questions/7048313/how-to-have-multiple-css-transitions-on-an-element) .. являются вы уверены, что не ищете анимацию ... переход просто изменяет что-то на -> от. –
перепроверьте мой ответ и демо обновлено на 3 секунды – K3rnel31