부트 스트랩 모달 스케일 및 변환

Question

내 부트 스트랩 모달이 translate가있는 애니메이션을 가지고 있습니다.

.modal.in .modal-dialog { 
    -webkit-transform: translate(0, 0); 
    -ms-transform: translate(0, 0); 
    -o-transform: translate(0, 0); 
    transform: translate(0, 0); 
} 

그래서 부트 스트랩 모달이 위에서 아래로 사라집니다. 모든 것이 잘 작동하지만 내가 좋아하는이 모달을위한 스케일을 적용 할 때 전환이 리셋 : 그래서 내 규모의 리셋 내가 mutliple 조건을 변환을 적용하므로 번역의 나 것이 괜찮아

.modal.in .modal-dialog { 
    transform: scale(1.5) 
} 

:

.modal.in .modal-dialog { 
    transform: scale(1.5) translate(0,0) 
} 

하지만, 이 경우 내 모달은 같은 시간에 번역 및 크기 조절과 같은 동작을하며 그 효과는 zoomIn과 같습니다.

모달 대화 상자가 첫 번째 축척을 적용한 다음 축척 모달을 적용하면 상단에서 중앙으로 전환 적용 할 수 있습니까? 도와주세요!

Answer 1

당신이 찾고있는 것을 "키 프레임"이라고 부릅니다 (더 많이 알고 싶다면 here를보십시오).

나는 바이올린을 만들어 곧 그것을 테스트 : Modal example with keyframes

다음 코드는 변환 (규모와 번역) 당신이 할 대신 "전환"의 "애니메이션"전화 그리고

@keyframes mymove { 
    0% {transform: scale(1);} 
    50% {transform: scale(1.2);} 
    100% {transform: scale(1.2) translate(0, 100px); 
} 

를 처리 이 같은 키 프레임 작업 : 애니메이션이 완료되면

이

animation: mymove 2s ease-out; 

, 모달의 상태 (정상으로 돌아 더 규모를 갈 것이다, 더 transitio 없다 n) - 그 이유는 다음과 같습니다.

transform: scale(1.2) translate(0, 100px); 

희망이 있습니다.