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

如何在css3中通过对角线展开图像？

1 个答案: