use*_*231 1 css html5 css-transitions css-animations
我一直在经历一些例子,我会在这里错过一些东西.我无法触发这个简单的css动画,改变一些文字的颜色.当我运行下面的示例时,文本保持黑色.
我有一个名为"changeColor"的动画,适用于h1元素的类"text".它将以5秒的间隔从一种颜色淡化为另一种颜色.
<!DOCTYPE html>
<html>
<head>
<style>
.text{
display:block;
-webkit-animation: changeColor 5s infinite; /* Safari 4+ */
-moz-animation: changeColor 5s infinite; /* Fx 5+ */
-o-animation: changeColor 5s infinite; /* Opera 12+ */
animation: changeColor 5s infinite; /* IE 10+ */
}
@keyframes changeColor {
0% {
color: 'red';
}
100% {
color: 'blue';
}
}
@-moz-keyframes changeColor {
0% {
color: 'red';
}
100% {
color: 'blue';
}
}
@-webkit-keyframes changeColor {
0% {
color: 'red';
}
100% {
color: 'blue';
}
}
</style>
</head>
<body>
<h1 class="text">Not Working</h1>
</body>
</html>
亲爱的,你正在申请css而不是js只是在你的CSS中删除''它会像魅力一样工作
链接是添加http://jsfiddle.net/6Hq8v/
.text{
display:block;
-webkit-animation: changeColor 5s infinite; /* Safari 4+ */
-moz-animation: changeColor 5s infinite; /* Fx 5+ */
-o-animation: changeColor 5s infinite; /* Opera 12+ */
animation: changeColor 5s infinite; /* IE 10+ */
}
@keyframes changeColor {
0% {
color: red;
}
100% {
color: blue;
}
}
@-moz-keyframes changeColor {
0% {
color: red;
}
100% {
color: blue;
}
}
@-webkit-keyframes changeColor {
0% {
color: red;
}
100% {
color: blue;
}
}