The essence of the question is this. Animation works fine when hover, but when I move the cursor away, there is not a smooth transition, but a sharp one. I can not understand what is wrong. You need a smooth transition when you hover and when the cursor is removed from the element. Thank!

.div1 { width: 200px; height: 200px; background: #ccc; position: relative; } @keyframes work-view { 0% { top: 0; } 100% { top: calc(45% - 25px); } } @keyframes work-opacity { 0% { opacity: 0; } 100% { opacity: 0.8; } } .div1:hover { background: #fcdc21; animation: work-opacity 0.3s ease; } .div1:hover:after { content: "+"; font-size: 50px; color: #282828; position: absolute; bottom: 0; left: calc(50% - 15px); right: 0; top: calc(45% - 25px); z-index: 1; animation: work-view 0.5s ease-in-out; } 
  <div class="div1"></div>

2 answers 2

I figured it out myself, but I don’t know how to behave in safari

 .div1 { width: 200px; height: 200px; background: #ccc; position: relative; } .div1:hover { background: #fcdc21; -webkit-transition: all 0.3s; transition: all 0.3s; } .div1:hover:after { top: calc(45% - 25px); opacity: 1; } .div1:after { content: "+"; font-size: 50px; color: #282828; position: absolute; bottom: 0; left: calc(50% - 15px); right: 0; top: 0; z-index: 1; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } 
  <div class="div1"></div>

  • Someone tell me what to change to work in safari? - max
  • you take away the calc and the safari will swallow it .. - user33274

 .div1 { width:200px; height:200px; background:#ccc; transition:1s background; position:relative; } .div1:hover { background:#fe4; } .div1:after { content:'+'; position:absolute; top:30px; left:50%; opacity:0; font-size:50px; transform: translate(-50%, -50%); transition:1s opacity, 1s top; } .div1:hover:after { content: '+'; opacity:1; top:50%; } 
 <div class="div1"> </div>