<div class='parent'> <div class='child'></div> </div> .parent { width: 400px; height: 400px; background-color: blue; } .child { width: 50%; height: 50%; background-color: red; transition: transform 3s ease-in-out 3s; */transition: transform 3s linear 3s;*/ */transition: transform 3s cubic-bezier(0.7,0.4,0.66,1.71) 3s; this we get in code inspect*/ } .parent:hover .child { background-color: green; transform: translateX(100%); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter