如何在css3中按对角线滚动显示图像？

Question

我在启动屏幕上工作，我应该在其中为徽标从屏幕中央到左上方的过渡设置动画。 推出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属性，以便将徽标从中心移动到左上角。 另外，您需要在动画中添加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