Rak*_*aks 12 css html5 animation css3
我想在可见性CSS属性上做一个基于关键帧的动画.我最初在"显示"上尝试过,但发现'display'上的动画不受支持,但是'visibility'是.这个想法是让矩形的可见性保持切换.我不想使用jquery并希望在CSS中实现它的全部内容.以下是我的代码,但它没有给出矩形的预期结果,直到第5秒仍然隐藏,出现然后在动画结束时再次消失
<head>
<style type="text/css">
#layer1 {
-moz-animation-duration: 10s;
-moz-animation-name: toggle;
}
@-moz-keyframes toggle {
from {
visibility:hidden;
}
50% {
visibility:visible;
}
to {
visibility:hidden;
}
}
</style>
<script type="application/javascript">
window.onload = function()
{
var c = document.getElementById('layer1');
var ctxt = c.getContext('2d');
ctxt.fillStyle = 'red';
ctxt.fillRect(0,0,200,200);
ctxt.fillStyle = 'green';
ctxt.fillRect(0,0,100,100);
}
</script>
<body>
<canvas id="layer1" width="200" height="200" >
</canvas>
</body>
</html>
小智 12
可见性属性上的CSS转换或动画使元素在转换期间保持可见,然后突然应用新值.(假设当前的规格并且只要没有使用特殊的计时功能.)可见性的过渡/动画不会显示逐渐变化的视觉效果,但是当我读到问题时,这个想法确实是将元素隐藏到第5秒.
您的CSS动画指定从0%到50%的第一次转换,从隐藏变为可见,根据上面的规则显示元素,然后指定从可见到隐藏的50%到100%的转换,这也显示元素播放.所以元素永久可见.
通过指定
@keyframes toggle {
from {
visibility:hidden;
}
50% {
visibility:hidden;
}
to {
visibility:visible;
}
}
元素将保持隐藏直到50%,然后突然出现.要在最后隐藏它,您需要添加可见性:隐藏到主样式表规则而不是关键帧.另请参阅我关于CSS过渡可见性的博客文章 http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility
JJJ*_*JJJ 11
可见性(和显示)属性无法设置动画.元素是可见的还是不可见的.请尝试使用该opacity属性:
@-moz-keyframes toggle {
from {
opacity:0;
}
50% {
opacity:1;
}
to {
opacity:0;
}
}