CSS Animation ist nicht am Anfang versteckt

Question

Ich möchte ein div, mit einem Wort nach innen haben. Dieses Wort sollte zusammen mit der Animation angezeigt werden, wenn das div-Steuerelement überlagert ist. Das animiert und benimmt sich wie ich will, AUSSERDEM ... das Wort "Hallo" ist sichtbar, wenn die Seite geladen wird. Ich möchte, dass es versteckt wird, und dann in Sicht animieren. Was muss ich reparieren?

#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

Sie müssen lediglich () aus den Werten von Eigenschaften entfernen, wie es sie ungültig machen. Außerdem ist es besser, die Deckkraft in 1% der Animation zu ändern, um den Skalierungseffekt sehen zu können.

Sie können auch die visiblity Eigenschaft aus der CSS entfernen, da es seit Sie Opazität

#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>