CSS3 анимации И переходы на hover

Question

У меня нет проблем с выполнением переходов и анимаций CSS3, но я нахожу проблемы с их объединением без каких-либо сбоев.

У меня есть список ссылок. Когда пользователь наводится над одним, он должен светиться (используя текстовую тень), но медленно и медленно вставлять импульсы. Но парящий и выходящий из линии связи должен слегка переходить из свечения. Кажется, я не могу заставить анимацию заканчиваться плавно. Поскольку анимация начинается с «свечения», это нормально, но в тот момент, когда пользователь покидает ссылку, она возвращается в состояние ON, а затем переходит в OFF. Это выглядит прекрасно, если анимация будет заполнена во время ухода, но если свечение низкое, оно сначала начнет мигать, а затем погаснет.

Я осведомлен о необходимости использования различных префиксов поставщика, для примера я буду использовать версии WebKit:

li { 
    text-shadow: 0 0 2px rgba(255,255,255,0); 
    -webkit-transition: 0.5s; 
} 

li:hover { 
    text-shadow: 0 0 2px rgba(255,255,255,1); 
    -webkit-animation: blink 0.5s ease-in-out infinite alternate; 
} 

@-webkit-keyframes blink { 
    0% { text-shadow: 0 0 2px rgba(255,255,255,0) } 
    100% { text-shadow: 0 0 2px rgba(255,255,255,1) } 
} 

FYI, заметить, что я использую только 0% и 100% , но с параметром параметра «альтернативный», который создает обратную петлю (так же, как если бы я установил 0% 50% и 100%). Я уверен, что это не причина проблемы.

Это просто «выключение» анимации сразу после того, как ссылка оставлена ​​без перехода, хотя у меня установлено время перехода.

Answer 1

Dont использование анимации просто используйте парение и переход

body{ 
 
    background:#0077aa; 
 
    } 
 
li { 
 
    font-size:3em; 
 
    -webkit-text-shadow: 0 0 2px rgba(255,255,255,0); 
 
    text-shadow: 0 0 2px rgba(255,255,255,0); 
 
    transition:all 0.5s ease-out; 
 
    -webkit-transition:all 0.5s ease-out; 
 
} 
 

 
li:hover { 
 
    text-shadow: 0 0 2px rgba(255,255,255,1); 
 
    -webkit-text-shadow: 0 0 2px rgba(255,255,255,1); 
 
}

<ul> 
 
    <li>first</li> 
 
    <li>second</li> 
 
    <li>third</li> 
 
    </ul>