CSS Animation isn't hidden at beginning - html

Question

I want to have a div, with a word inside. This word should appear with animation when the div is hovered over. This is animating and behaving the way I want, EXCEPT... the word "hello" is visible when the page loads. I want it to be hidden, and then animate into view. What do I need to fix?
#test{
border: 1px solid #000;
}
#hello {
animation-name: hello;
animation-duration: 0.5s;
animation-fill-mode: backwards;
animation-play-state: paused;
}
#hello:hover {
animation-fill-mode: forwards;
animation-play-state: running;
visibility: visible;
}
#keyframes hello {
0% {visibility:(hidden);transform:scale(0.5); opacity:(0.0);}
1% {visibility:(visible);}
50% {transform:scale(1.2); opacity:(0.5);}
100% {transform:scale(1.0); opacity:(1.0);}
}
<div id="test">
<div id="hello">
Hello!
</div>
</div>

Answer 1

You need to simply remove () from the values of properties as it make them invalid. Also it's better to change the opacity in the 1% of the animation to be able to see the scale effect.
You may also remove the visiblity property from the CSS as it's useless since you are using opacity
#test {
border: 1px solid #000;
background:#fff;
overflow:hidden; /* added this to avoid the scroll to appear and disappear*/
}
#hello {
animation-name: hello;
animation-duration: 0.5s;
animation-fill-mode: backwards;
animation-play-state: paused;
}
#test:hover #hello {
animation-fill-mode: forwards;
animation-play-state: running;
/*visibility: visible; can be removed*/
}
#keyframes hello {
0% {
/*visibility: hidden; can be removed*/
transform: scale(0.5);
opacity: 0;
}
1% {
/*visibility: visible; can be removed*/
opacity:0.3;
}
50% {
transform: scale(1.2);
opacity:0.5;
}
100% {
transform: scale(1.0);
opacity:1.0;
}
}
<div id="test">
<div id="hello">
Hello!
</div>
</div>