退出悬停时反转动画

Question

当悬停在单词上时，它会出现一个流畅的动画，但是当我们退出悬停状态而不是反转动画时，它就会被切断。进入悬停状态和退出悬停状态时，如何使动画流畅？

示例如下：

*{
  font-size: 50px;
}
.container a{
    position:relative;
    float:left;
    font-family: 'Montserrat', sans-serif;
    font-weight:bold;
    margin-left: 5%;
    padding-right: 10px;
}
.child{
    position:relative;
    float:left;
    display:none;
    padding-left: 10px;
    font-weight:bold;
}
.container:hover > .child{
    transition: .4s;
    color:#F0C930;
    border-left: 4px solid #F0C930;
    animation: effect .5s;
    display:block;
}
@keyframes effect{
from{
position:relative;
padding-left: 0px;
opacity:0;}
to{
position:relative;
padding-left: 10px;
opacity:1;
    }
}
}

<p>hover over "Word"</p>
<div class="container">
  <a>Word</a>
  <div class="child">Word</div>
 </div>

Answer 1

使用CSS transition 来处理不透明度和填充。 CSS Transition

.container {
  display: flex;
  font-size: 50px;
  cursor: pointer;
}

.container .child {
  transition: opacity .5s, padding .5s;
  border-left: 4px solid #F0C930;
  opacity: 0;
  margin-left: 20px;
  color: #F0C930;
}

.container:hover .child {
  opacity: 1;
  padding-left: 20px;
}

<div class="container">
  <a>Word</a>
  <div class="child">Word</div>
</div>

退出悬停时反转动画

Reverse animation when exiting hover

html

css

animation

hover