Keyframes doesn't work when keyframe-class is added

有些话、适合烂在心里 提交于 2021-02-10 14:43:39

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!