html - CSS 动画一开始没有隐藏

Question

我想要一个div，里面有一个词。当 div 悬停在上面时，这个词应该与动画一起出现。这是我想要的动画和行为方式，除了......页面加载时可以看到“你好”这个词。我希望它被隐藏，然后动画显示。我需要修复什么？

#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

您只需从属性值中删除 () 即可，因为这会使它们无效。此外，最好更改动画 1% 的不透明度，以便能够看到缩放效果。

您还可以从 CSS 中删除 visiblity 属性，因为它没有用，因为您正在使用不透明度

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