Question

我有一个带有活动动画的元素：

#preloader .circle-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 94px;
    height: 94px;
    margin: -47px 0 0 -47px;
    border: 4px solid #fff;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    animation: spinOffPulse 1s infinite linear;
}

@keyframes spinOffPulse{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

当我的预加载器停止加载时，我想设置一个特殊的类，然后使用以下代码为我的.circle-outer设置动画：

#preloader.loaded .circle-outer {
  transform: scale(2);
}

但它不起作用。如果我关闭动画，一切正常，但我可以转换'动画'活动元素吗？即使我不这样做，我怎么能达到这种效果呢？

感谢。

Answer 1

你尝试过这个吗？

 @keyframes spinOffPulse{
     0%{transform: rotate(0deg) scale(1);}
     100%{transform: rotate(360deg) scale(2);}  
 }

有效：

http://jsfiddle.net/y5jtyod4/

使用活动动画对元素执行转换

1 个答案: