css - 文本阴影 css3 动画/过渡不工作

Question

我无法弄清楚为什么这不起作用，我已经对照其他示例对此进行了检查，例如在此处的 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 中添加了您引用的过渡属性并设置了默认文本阴影。如果您有备用动画并且您的 from 和 to 相等，则不需要 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>