添加关键帧-class 后关键帧不起作用

Question

我有一张用户卡，打开时会显示用户的照片。

这可行，但我想要实现的是使用 CSS 关键帧制作更复杂的动画。

.userCard__image-shown{
    transform: scale(1);
}

我通过向 class 添加关键帧来尝试此操作。userCard__image-shown

@keyframes test{
    0% {transform: scale(0.1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}
.userCard__image-shown{
    animation: test 0.2s;
    animation-iteration-count: 1;
}

关键是当我切换这个 class 时，它不起作用。我做错了什么？

（我希望你能理解我（还）糟糕的英语）

Answer 1

你没有做错任何事。有时浏览器不支持所有属性，您可能需要使用供应商前缀以获得最佳浏览器支持。这就是导致动画问题的原因。

例如，动画在Chrome上无法正常工作，但您可以添加-webkit-前缀，它会解决问题：

@-webkit-keyframes test{
    0% {transform: scale(0.1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}

.userCard__image-shown{
    animation: test 0.2s;
    animation-iteration-count: 1;
    transform: scale(1);
    -webkit-animation:test 0.2s;
    -webkit-animation-iteration-count:1;
}

这是一个使用您的 JSFiddle 代码的演示（我将动画持续时间更改为 2 秒以便可以看到）：

$('#userName-1').on('click', function(){
    $( ".userCard" ).toggleClass('userCard-shown').delay( 300 );
    $( ".userCard__image" ).toggleClass('userCard__image-shown');
});

body{overflow: hidden;}img{border-radius: 50%;}
.userCard{
    background-color: deepskyblue;
    position: absolute;
    right: -300px;
    opacity: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    transition: all 0.2s;
}

.userCard-shown{
    opacity: 1;
    right: 0;
}

.userCard__image{
    padding-top: 32px;
    margin: 0 auto;
    position: relative;
    width: 90px;
    transition: all 0.4s;
    transform: scale(0.1);
}

.userCard__image-shown{
    animation: test 2s;
    animation-iteration-count: 1;
    transform: scale(1);
    -webkit-animation:test 2s;
    -webkit-animation-iteration-count:1;
}

@keyframes test{
    0% {transform: scale(0.1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}

@-webkit-keyframes test{
    0% {transform: scale(0.1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#"><span id="userName-1">UserName</span></a>

<div class="userCard">
    <div class="userCard__image">
        <img src="//yt3.ggpht.com/-LYuWGoFbuCs/AAAAAAAAAAI/AAAAAAAAAAA/LYsyfZDIHjc/s100-c-k-no/photo.jpg"/>
    </div>
</div>

在 JSFiddle 上也是如此：https://jsfiddle.net/xv036sny/3/

添加关键帧-class 后关键帧不起作用

Keyframes doesn't work when keyframe-class is added

jquery

css-transitions