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

Question

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

That's basically all I'm asking.

I want the elem to smoothly move to the center of the image from wherever it is on the page using something like a checkbox to toggle between the states.

I really really want to do this with pure CSS. Can it be done?

Answer 1

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

尝试这样的事情。问题是您没有在默认状态下指定transform或top和left，因此CSS转换不知道如何从未定义状态计算到定义状态当支票被切换时。

img {
    width: 400px;
    position: absolute;
    transition: all 0.3s ease;
    /* these need to be specified as well */
    top: 0;
    left: 100px;
    transform: translate(0, 0);
}

input:checked {
    + label {
        img {
            /* since they're the values being transitioned */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}