I can not understand how to return the block to its original state to make it smooth. How to do with html and css, without js.

.button { display: block; position: fixed; height: 100px; width: 100px; bottom: 50px; border: 1px solid black; } .block { display: block; position: fixed; height: 100px; width: 100px; top: 50px; border: 1px solid #aaa; color: #aaa; } .button.one { margin: 0 30%; } .button.two { margin: 0 50%; } .button.tree { margin: 0 70%; } .block.one { margin: 0 30%; } .block.two { margin-left: 50%; } .block.tree { margin-left: 70%; } span { position: absolute; top: 40%; left: 23%; } input { display: none; } label { position: absolute; top: 0%; left: 0%; height: 100px; width: 100px; } .spanBlock { position: absolute; top: 40%; left: 46%; } /* Connecting animation*/ .button.one:hover+.block.one { animation: one 2s forwards; } input:checked+.block.two { animation: two 2s forwards; } .button.tree:active+.block.tree { animation: tree 2s forwards; } /* End сonnecting animation*/ /* Animation button*/ .button.one:hover { background: #bbb; transition: 1s; } input:checked+div+div { background: #bbb; transition: 1s; } .button.tree:active { background: #bbb; transition: 1s; } /* End animation button*/ @keyframes one { 0% { transform: translateY(0px); border: 1px solid #aaa; color: #aaa; } 100% { transform: translateY(150px) rotate(45deg); border: 1px solid black; color: black; } } @keyframes two { 0% { transform: translateY(0px); border: 1px solid #aaa; color: #aaa; } 100% { transform: translateY(200px); border: 1px solid black; color: black; } } @keyframes tree { 0% { transform: translateX(0px); } 100% { transform: translateX(400px); } } 
 <div class="button one"><span>Hover me</span></div> <div class="block one"><span class="spanBlock">1</span></div> <input id="ch" type="checkbox"> <div class="block two"><span class="spanBlock">2</span></div> <div class="button two"> <label for="ch"> <span>Click me</span> </label> </div> <div class="button tree"><span>Hold me</span></div> <div class="block tree"><span class="spanBlock">3</span></div>

  • .button.one + .block.one {animation: one_h 2s forwards; } @keyframes one_h {0% {transform: translateY (150px) rotate (45deg); border: 1px solid #aaa; color: #aaa; } 100% {transform: translateY (0px); border: 1px solid black; color: black; }} Do the same in the reverse order - Daniel
  • Why not just do it on: hover? - Daniel
  • transition usually not set to the active element, but to the normal one, so that smoothness works in both directions - DaemonHK

1 answer 1

Option to abandon animation in favor of transitions

PS in the animation you need to add transition to the original block .block.one { transition: all 2s; }
! but if the animation does not finish playing until the end, the return will be a jump.

PSS in the animation you need to create a reverse animation .. and attach it without a hover. But in a simple version, it will be played at the start of the page .. which is not gud.

 .button { display: block; position: fixed; height: 100px; width: 100px; bottom: 50px; border: 1px solid black; } .block { display: block; position: fixed; height: 100px; width: 100px; top: 50px; border: 1px solid #aaa; color: #aaa; } .button.one { margin: 0 30%; } .button.two { margin: 0 50%; } .button.tree { margin: 0 70%; } .block.one { margin: 0 30%; transform: translateY(0px); border: 1px solid #aaa; color: #aaa; transition: all 2s; } .block.two { margin-left: 50%; transform: translateY(0px); border: 1px solid #aaa; color: #aaa; transition: all 2s; } .block.tree { margin-left: 70%; transform: translateX(0px); transition: all 2s; } span { position: absolute; top: 40%; left: 23%; } input { display: none; } label { position: absolute; top: 0%; left: 0%; height: 100px; width: 100px; } .spanBlock { position: absolute; top: 40%; left: 46%; } /* Connecting animation*/ .button.one:hover+.block.one { /* animation: one 2s forwards;*/ transform: translateY(150px) rotate(45deg); border: 1px solid black; color: black; } input:checked+.block.two { /* animation: two 2s forwards;*/ transform: translateY(200px); border: 1px solid black; color: black; } .button.tree:active+.block.tree { /* animation: tree 2s forwards;*/ transform: translateX(400px); } /* End сonnecting animation*/ /* Animation button*/ .button.one:hover { background: #bbb; transition: 1s; } input:checked+div+div { background: #bbb; transition: 1s; } .button.tree:active { background: #bbb; transition: 1s; } /* End animation button*/ /* @keyframes one { 0% { transform: translateY(0px); border: 1px solid #aaa; color: #aaa; } 100% { transform: translateY(150px) rotate(45deg); border: 1px solid black; color: black; } } @keyframes two { 0% { transform: translateY(0px); border: 1px solid #aaa; color: #aaa; } 100% { transform: translateY(200px); border: 1px solid black; color: black; } } @keyframes tree { 0% { transform: translateX(0px); } 100% { transform: translateX(400px); } }*/ 
 <div class="button one"><span>Hover me</span></div> <div class="block one"><span class="spanBlock">1</span></div> <input id="ch" type="checkbox"> <div class="block two"><span class="spanBlock">2</span></div> <div class="button two"> <label for="ch"> <span>Click me</span> </label> </div> <div class="button tree"><span>Hold me</span></div> <div class="block tree"><span class="spanBlock">3</span></div>