css - 如何在css3中按对 Angular 线滚动显示图像？

我在启动屏幕上工作，我应该在其中为徽标从屏幕中央到左上方的过渡设置动画。推出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中的过渡和动画之间进行组合呢？

最佳答案

在这里，您还需要在动画中指定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

关于css - 如何在css3中按对 Angular 线滚动显示图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30311538/