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