Keyframes doesn't work when keyframe-class is added

问题

I have a user card that when gets opened, shows the user's picture.

(https://jsfiddle.net/xv036sny/2/)

This works, but what I want to achieve is to make a more complex animation using CSS Keyframes.

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

Im trying this by adding keyframes to the 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;
}

The point is that when I'm toggling this class, it doesn't work. What Im doing wrong?

(I hope you understand my (yet) bad English)

回答1:

You are not doing anything wrong. Sometimes browsers don't support all the properties, and you may need to use the vendor prefix to get the best browser support. This is what causes the animation issue.

For example, the animation doesn't work correctly on Chrome, but you can add the -webkit- prefix and it will solve the problem:

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

Here is a demo using the code from your JSFiddle (I changed the animation duration to 2 seconds so it can be seen):

$('#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>

And on JSFiddle too: https://jsfiddle.net/xv036sny/3/

来源：https://stackoverflow.com/questions/30371542/keyframes-doesnt-work-when-keyframe-class-is-added

标签

jquery

css-transitions