текст-тень CSS3 анимация/переход не работает

Question

Я не могу понять, почему это разве работает, I'v проверил это на других примерах, например, на codePen здесь:

http://codepen.io/NobodyRocks/pen/qzfoc

мой CSS:

.text-header { 
    font-family: "oxygenlight"; 
    text-transform: uppercase; 
    color:$bright-yellow; 
    -webkit-animation: yellowPulse 2s ease-in-out infinite alternate; 
    -moz-animation: yellowPulse 2s ease-in-out infinite alternate; 
    -ms-animation: yellowPulse 2s ease-in-out infinite alternate; 
    -o-animation: yellowPulse 2s ease-in-out infinite alternate; 
    animation: yellowPulse 2s ease-in-out infinite alternate; 
} 

@-webkit-keyframes yellowPulse { 
    from { 
     text-shadow: 
      1px 0px 25px rgba(248,235,51,1), 
      0px 1px 25px rgba(248,235,51,1), 
      -1px 0px 25px rgba(248,235,51,1), 
      0px -1px 25px rgba(248,235,51,1), 
      1px 4px 25px rgba(248,235,51,1); 
    } 
    50% { 
     text-shadow: 
      1px 0px 25px rgba(248,235,51,0), 
      0px 1px 25px rgba(248,235,51,0), 
      -1px 0px 25px rgba(248,235,51,0), 
      0px -1px 25px rgba(248,235,51,0), 
      1px 4px 25px rgba(248,235,51,0); 
    } 
    to { 
     text-shadow: 
      1px 0px 25px rgba(248,235,51,1), 
      0px 1px 25px rgba(248,235,51,1), 
      -1px 0px 25px rgba(248,235,51,1), 
      0px -1px 25px rgba(248,235,51,1), 
      1px 4px 25px rgba(248,235,51,1); 
    } 
} 

Answer 1

Это работает для меня. Я добавил свойство перехода из вашей ссылки в css и установил текстовую тень по умолчанию. Если у вас есть альтернативная анимация, а ваша от и до равна, то вам не нужно 50%. Просто сделайте 50% очков и измените скорость анимации.

span { 
 
    display: block; 
 
    padding: 50px; 
 
    background: black; 
 
    text-transform: uppercase; 
 
    -moz-transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
    color: #ff0; 
 
    text-shadow: 0px 0px 0px black; 
 
    -webkit-text-shadow: 0px 0px 0px black; 
 
} 
 

 
span:hover { 
 
    -webkit-animation: pulse 2s ease-in-out infinite alternate; 
 
    -moz-animation: pulse 2s ease-in-out infinite alternate; 
 
    -ms-animation: pulse 2s ease-in-out infinite alternate; 
 
    -o-animation: pulse 2s ease-in-out infinite alternate; 
 
    animation: pulse 2s ease-in-out infinite alternate; 
 
} 
 

 
@-webkit-keyframes pulse { 
 
    from { 
 
    text-shadow: 1px 1px 2px blue; 
 
    -webkit-text-shadow: 1px 1px 2px blue; 
 
    } 
 
    to { 
 
    text-shadow: 1px 1px 2px red; 
 
    -webkit-text-shadow: 1px 1px 2px red; 
 
    } 
 
} 
 

 
@-moz-keyframes pulse { 
 
    from { 
 
    text-shadow: 1px 1px 2px blue; 
 
    } 
 
    to { 
 
    text-shadow: 1px 1px 2px red; 
 
    } 
 
} 
 

 
@keyframes pulse { 
 
    from { 
 
    text-shadow: 1px 1px 2px blue; 
 
    } 
 
    to { 
 
    text-shadow: 1px 1px 2px red; 
 
    } 
 
}

<span class="text-header">Title</span>