Rotation CSS3 et traduction de 2 cases

Question

J'ai 2 boîtes (200px X 200px) et je veux les animer avec une animation CSS. La première (case supérieure) doit animer de rotateX (0deg) à rotateX (90deg) et j'utilise transform-origin: center top. Et je veux que la deuxième case suive la ligne du bas de la première case pour que j'anime cette boîte de translateZ (0px) translateY (0px) à translateZ (200px) translateY (-200px). Et c'est bon seulement au début et à la fin de l'animation. L'exemple est sur ce lien Animation example. Comment faire ceci afin que la boîte ne s'effondre pas entre le début et la fin de l'animation?

Dans l'exemple, j'utilise seulement -webkit- et -moz- prefix.

JSFIDDLE

HTML

<div class="box box-1"></div> 
<div class="box box-2"></div> 

CSS

body{ 
    padding: 200px 0 0 0; 
    margin: 0; 
    background-color: orange; 
    -webkit-transform-style: preserve-3d; 
    -webkit-perspective: 1000px; 

    -moz-transform-style: preserve-3d; 
    -moz-perspective: 1000px; 
} 
.box{ 
    height: 200px; 
    width: 200px; 
    margin: 0 auto; 
    -webkit-transform-origin: center top; 

    -moz-transform-origin: center top; 
    opacity: 0.7; 
} 
.box-1{ 
    background-color: blue; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-name: boxOne; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: alternate; 

    -moz-animation-duration: 3s; 
    -moz-animation-name: boxOne; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-direction: alternate; 
} 
.box-2{ 
    background-color: purple; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-name: boxTwo; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: alternate; 

    -webkit-animation-duration: 3s; 
    -webkit-animation-name: boxTwo; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: alternate; 
} 





@-webkit-keyframes boxOne{ 
    from { 
    -webkit-transform: rotateX(0deg); 
    } 

    to { 
    -webkit-transform: rotateX(90deg); 
    } 
} 


@-webkit-keyframes boxTwo{ 
    from { 
    -webkit-transform: translateZ(0px) translateY(0px); 
    } 

    to { 
    -webkit-transform: translateZ(200px) translateY(-200px); 
    } 
} 



@-moz-keyframes boxOne{ 
    from { 
    -moz-transform: rotateX(0deg); 
    } 

    to { 
    -moz-transform: rotateX(90deg); 
    } 
} 


@-moz-keyframes boxTwo{ 
    from { 
    -moz-transform: translateZ(0px) translateY(0px); 
    } 

    to { 
    -moz-transform: translateZ(200px) translateY(-200px); 
    } 
} 

Answer 1

C'est tout à fait une animation compliquée. Vous voudrez peut-être examiner différentes méthodes d'assouplissement pour la traduction. Si vous simplifiez le problème sur un plan 2D, la hauteur de l'élément supérieur augmente mais le taux de croissance augmente avec le temps. Vous pouvez appliquer une accélération à l'animation du second élément pour imiter cette augmentation au fil du temps. Voir si l'un de ces aide: http://easings.net/ Le easeInCirc est probablement le plus proche de (si pas exactement) ce dont vous avez besoin.