Question

我无法理解为什么这不起作用，我已经针对其他示例进行了检查，例如在codePen上：

我的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中添加了引用的transition属性，并设置了默认的text-shadow。如果你有一个替代动画，你的和你的相等，你不需要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>

text-shadow css3动画/转换不起作用

1 个答案: