{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 做自己的国王 的问题《CSS Visibility Animation Not working》','https://www.manongdao.com/q-618760.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I want to do a keyframe based animation on the the visibility CSS property. I initially tried it on 'display' but found that animation on 'display' is not supported but 'visibility' is. The idea is to make visibility of rectangle keep toggling. I do not want to use jquery and want to implement whole of it in CSS. Following is my code but it does not give the expected result of the rectangle remaining hidden till the 5th second, appearing and then again disappearing at the end of animation
<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>
Visibility (and display) property can't be animated. An element is either visible or not. Try the
opacityproperty instead:A CSS transition or animation on the visibility property keeps the element visible for the duration of the transition and then abruptly applies the new value. (assuming the current spec and as long as no special timing function is used.) Transitions/Animations on visibility do not show a gradually changing visual effect, however as I read the question the idea is indeed to keep the element hidden till the 5th second.
Your CSS animation specifies a first transition from 0% to 50% turning from hidden to visible which shows the element according to the rule above and then you specify a transition from 50% to 100% from visible to hidden, which also shows the element while playing. So the element it permanently visible.
By specifying
the element will stay hidden until 50% and then abruptly appear. To hide it at the end, you need to add visibility:hidden to the main style sheet rule not to the keyframes. Also see my blog post on CSS transition visibility http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility