[CSS] - position transition이 이루어지지 않을 때

positioin transition이 이루어지지 않을 때

.front,
.back {
    position: absolute;
    transition: 0.5s;
}

.item:hover .front {
    top: -50%;
}

.item:hover .back {
    top: 50%;
    opacity: 1;
}

• 이런상황일때에는 .front와 .back이 자연스럽게 열리지않는다 (transition이 먹지않음)
• 이 이유는 .front, .back에 공통적인 요소 top속성이 없기 때문에 적용되지않는것이다. 따라서

.front,
.back {
    position: absolute;
	top: 0;
    transition: 0.5s;
}

이렇게 top 속성을 주어야한다. 동일한 속성이 존재해야 transition 속성이 적용된다!