Comment réaliser une transition en douceur de l'élément en dehors de la limite?

Question

J'ai un conteneur qui contient un div à l'intérieur. En cliquant sur ce carré div, il commence à bouger et finit par être à l'extérieur du conteneur.

Mon problème est que ce bloc interne est très découpé en dépassant la limite. Comment cette transition pourrait-elle être faite plus facilement en utilisant des moyens CSS? Je veux obtenir un effet quand ce carré disparaît devient doux pour les yeux. Peut-être que je suis censé utiliser une sorte de masque d'image pour le conteneur principal ou un effet de fondu pour le carré. Je ne suis pas vraiment sûr de la façon d'atteindre ce comportement.

Merci d'avance!

Codepan sandbox

.borderline { 
 
    position: relative; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 150px; 
 
    width: 400px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 

 
.square { 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #0087ff; 
 
} 
 

 
.square:focus { 
 
    transform: translateX(500px); 
 
    transition: all 2s; 
 
}

<div class='borderline'> 
 
    <div class='square' tabindex="1">Click me</div> 
 
</div>

Answer 1

vous pourriez peut-être ajouter une animation à votre css avec l'opacité comme:

.square:focus { 
    transform: translateX(500px); 
    transition: all 2s; 
    animation-name: example; 
    animation-duration: 1s; 

} 
@keyframes example { 
    0% {opacity:1} 
    50% {opacity:1} 
    100% {opacity:0} 

} 

https://codepen.io/anon/pen/rzppON