CSS의 축척 변경

Question

.bunch 이미지입니다. 이 애니메이션을 이미지 하단에서 확대되도록 변경하여 대신 바닥에서 나타납니다. 현재는 중간에서부터 확장됩니다.

.bunch { 
    position: absolute; 
    top: 250px; 
    left:320px; 
    -webkit-animation: flowerGrow 3s forwards; 
} 


@-webkit-keyframes flowerGrow { 
    0% { -webkit-transform: scaleY(0)} 
    100% { -webkit-transform: scaleY(1)} 
} 

미리 감사드립니다.

Answer 1

는 transform-origin를 참조하십시오

.bunch { 
    position: absolute; 
    top: 250px; 
    left:320px; 
    -webkit-animation: flowerGrow 3s forwards; 
    -webkit-transform-origin: 50% 100%; 
} 

@-webkit-keyframes flowerGrow { 
    0% { -webkit-transform: scaleY(0)} 
    100% { -webkit-transform: scaleY(1)} 
} 

DEMO