我无法理解为什么这不起作用,我已经针对其他示例进行了检查,例如在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);
}
}
答案 0 :(得分:0)
这对我有用。我在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>