css - Transitioning an element from its current position to the center of the viewport? -

transitioning element current position center of viewport?

that's i'm asking.

i want elem smoothly move center of image wherever on page using checkbox toggle between states.

i really want pure css. can done?

http://codepen.io/anon/pen/lveyzm

try this. problem did not specify transform or top , left in default state, css transition not know how calculate undefined state defined 1 when check toggled.

img {     width: 400px;     position: absolute;     transition: 0.3s ease;     /* these need specified */     top: 0;     left: 100px;     transform: translate(0, 0); }  input:checked {     + label {         img {             /* since they're values being transitioned */             top: 50%;             left: 50%;             transform: translate(-50%, -50%);         }     } }