Question

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

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

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

我尝试将关键帧添加到类 .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;
}

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

（我希望你能理解我的英语不好）

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秒，因此可以看到）：

＆＃13;

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

＆＃13;

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);}
}

＆＃13;

<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>

＆＃13;

在JSFiddle上：https://jsfiddle.net/xv036sny/3/

添加keyframe-class时，关键帧不起作用

1 个答案: