Menu
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>
528
CSS animations work on most modern mobile and desktop browsers. However, your animations may not work if you're using an older browser or a version of your browser that hasn't been updated in several years, simply due to lack of browser support.
Note: As per W3C specification CSS visibility is an animatable property, however, it doesn't animate like other animatable properties.
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable.
Combine this approach with a negative margin (for example margin-top: -200px) then at 100% set margin-top to initial desired value. When the element is min-height: 200px then you will have a smooth delay without the need of using JS tricks that are always a bit painful.
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
@keyframes toggle {
from {
visibility:hidden;
}
50% {
visibility:hidden;
}
to {
visibility:visible;
}
}
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
75
Visibility (and display) property can't be animated. An element is either visible or not. Try the opacity property instead:
@-moz-keyframes toggle {
from {
opacity:0;
}
50% {
opacity:1;
}
to {
opacity:0;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
