Css元素悬停以动画开始，但意外结束

Question

当我悬停元素时，动画开始但是当我取消它的焦点时，动画不会反转，一切都会在动画开始之前恢复原样。我想让它从动画开始，以动画结束。

div#time{
background-color:#ecf0f1;
display:inline-block;
font-size:calc(3vh + 3vw);
border:5px solid #ecf0f1;
border-radius:0.7em;
top:2vh;
position:fixed;
width:30vw;
opacity:0.8;
 left: 0;
  right: 0;
  margin: 0 auto;
}
div#time:hover{
transition:1s;
border-radius:0;
background-color:#141414;
border:5px solid #141414;
color:white;

}

<center><div id='time'>hiiiiiii</div></center>

https://codepen.io/abooo/pen/LeZOWR?editors=1100

Answer 1

您将过渡属性放在错误的位置。

div#time {
  background-color: #ecf0f1;
  display: inline-block;
  font-size: calc(3vh + 3vw);
  border: 5px solid #ecf0f1;
  border-radius: 0.7em;
  top: 2vh;
  position: fixed;
  width: 30vw;
  opacity: 0.8;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: 1s;
}

div#time:hover {
  border-radius: 0;
  background-color: #141414;
  border: 5px solid #141414;
  color: white;
}

<center>
  <div id='time'>hiiiiiii</div>
</center>

Answer 2

只需将transition: 1s;移动到主选择器，而不是：悬停一个

    div#time{
      background-color:#ecf0f1;
      display:inline-block;
      font-size:calc(3vh + 3vw);
      border:5px solid #ecf0f1;
      border-radius:0.7em;
      top:2vh;
      position:fixed;
      width:30vw;
      opacity:0.8;
      left: 0;
      right: 0;
      margin: 0 auto;
  transition:1s;
    }
    div#time:hover{
      border-radius:0;
      background-color:#141414;
      border:5px solid #141414;
      color:white;
    }

<center><div id='time'>hiiiiiii</div></center>

Answer 3

如果将转换移动到实际div，则它适用于两者。

div#time{
background-color:#ecf0f1;
display:inline-block;
font-size:calc(3vh + 3vw);
border:5px solid #ecf0f1;
border-radius:0.7em;
top:2vh;
position:fixed;
width:30vw;
opacity:0.8;
 left: 0;
  right: 0;
  margin: 0 auto;
  transition:1s;
}
div#time:hover{

border-radius:0;
background-color:#141414;
border:5px solid #141414;
color:white;

}

<center><div id='time'>hiiiiiii</div></center>