如何制作一次CSS转换循环？

我想让一些文本淡入淡出，然后回到原来的颜色。如何制作一次CSS转换循环？

#sidebar2:target .phonenumber { 
    -o-transition:0.7s; 
    -ms-transition:0.7s; 
    -moz-transition:0.7s; 
    -webkit-transition:0.7s; 
    transition:0.7s; 
    color: yellow; 
}

目前它只是去新的颜色和保持那样。我如何调整这些代码，使其符合我的要求？任何帮助表示赞赏！

编辑：

我使用：目标，这样，当用户点击同一页面的链接，说我链接到突出显示文本的一部分。我希望文字淡入不同的颜色，然后再回到

来源

2013-04-30 Chris

你有一个你目前拥有的jsfiddle吗？ – Andrew 2013-04-30 12:27:31

我相当肯定是不可能的循环转换，你可以从一个状态过渡到另一种，但没有再次回到一个过渡。

为了达到您寻找的效果，您将使用动画代替。

首先成立了动画关键帧：

@keyframes glowyellow { 
    0% { color: auto; } 
    50% { color: yellow; } 
    100% { color: auto; } 
}

然后到你的元素上使用：

#sidebar2:target .phonenumber { 
    animation: glowyellow 1.4s linear; 
}

使用供应商前缀支持的浏览器，你在你的例子做。

这是fiddle as an example。

来源

2013-04-30 12:15:20

不错的斯图尔特+1，但最好定义一些颜色或者使用'inherit'而不是自动 – 2013-04-30 12:22:48

谢谢，我认为'inherit'将使用父元素的颜色，而使用'auto'则允许您使用之前为元素设置的任何初始颜色。这个小提琴表明，使用'inherit''窃取父母的颜色定义，而不是保留元素原来的颜色。 http://jsfiddle.net/qzEFL/1/ – 2013-04-30 12:29:13

这完美的谢谢Stuart。出于兴趣@keyframes得到了多大的支持？ – Chris 2013-04-30 13:22:47

你的意思是这样的吗？

Demo

span { 
    color: #000; 
    transition: color 1s; 
    /* Not using proprietary codes here, you can add it if you need */ 
} 

span:hover { 
    color: #aaa; 
}

来源

2013-04-30 12:09:48

感谢您的回复。我正在使用：目标，以便当用户点击同一页面链接时，该页面的该部分将突出显示。我希望文字淡出不同的颜色，然后再回来 – Chris 2013-04-30 12:16:42

@Chris本文将帮助您http://css-tricks.com/on-target/ – 2013-04-30 12:20:28

如何制作一次CSS转换循环？

回答

相关问题