css - 如何在 css3 中按对 Angular 线展开图像？

Question

我正在处理启动画面，我应该在其中制作 Logo 从屏幕中心到左上角的过渡动画。推出 CS3 效果我已经这样做了，但我想将它移到左上角

    .animated { 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes rollOut { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateX(0px) rotate(0deg); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateX(100%) rotate(120deg); 
    } 
} 
@keyframes rollOut { 
    0% { 
        opacity: 1; 
        transform: translateX(0px) rotate(0deg); 
    } 
    100% { 
        opacity: 0; 
        transform: translateX(100%) rotate(120deg); 
    } 
} 
.rollOut { 
    -webkit-animation-name: rollOut; 
    animation-name: rollOut; 
}

那么我如何在 css 中结合过渡和动画来做到这一点呢？

Answer 1

在这里，您还需要在动画中指定right、left 和top 属性，以便将 Logo 从中心移动到左上角。您还需要将 translateY 添加到您的动画中。

.animated { 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    /* to center */
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
} 

@-webkit-keyframes rollOut { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); 
        right: 0;
        top: 50%;
        } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateX(-100px) translateY(-100%) rotate(720deg); 
        right: 100%;
        top: 0;
        } 
} 
@keyframes rollOut { 
    0% { 
        opacity: 1; 
        transform: translateX(0px) translateY(0px) rotate(0deg); 
        right: 0;
        top: 50%; 
        } 
    100% { 
        opacity: 0; 
        transform: translateX(-100px) translateY(-100%) 
        right: 100%;
        top: 0;
        } 
} 
.rollOut { 
-webkit-animation-name: rollOut; 
animation-name: rollOut; 
}

参见此处:http://codepen.io/anon/pen/mJEKyv