添加关键帧类时，关键帧不起作用 [英] Keyframes doesn't work when keyframe-class is added

问题描述

我有一张用户卡，打开后会显示用户的图片.

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

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

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

我正在尝试通过将关键帧添加到类 .userCard__image-显示

来进行此操作

  @keyframes测试{0％{transform:scale(0.1);}50％{transform:scale(1.1);}100％{transform:scale(1);}}.userCard__图片显示{动画:测试0.2秒；animation-iteration-count:1；} 

要点是，当我切换该类时，它不起作用.我在做什么错了?

(我希望你能理解我的(还)糟糕的英语)

解决方案

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

例如，动画无法在Chrome上正常运行，但是您可以添加 -webkit-前缀，它将解决问题:

  @-webkit-keyframes测试{0％{transform:scale(0.1);}50％{transform:scale(1.1);}100％{transform:scale(1);}}.userCard__图片显示{动画:测试0.2秒；animation-iteration-count:1；转换:scale(1);-webkit-animation:测试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 {背景色:deepskyblue;位置:绝对；右:-300px；不透明度:0；最高:0;底部:0;宽度:300像素；过渡:所有0.2秒；}.userCard-shown {不透明度:1；正确:0；}.userCard__image {padding-top:32像素；保证金:0自动;职位:相对宽度:90像素；过渡:所有0.4秒；转换:scale(0.1);}.userCard__图片显示{动画:测试2秒；animation-iteration-count:1；转换:scale(1);-webkit-animation:test 2s;-webkit-animation-iteration-count:1;}@keyframes测试{0％{transform:scale(0.1);}50％{transform:scale(1.1);}100％{transform:scale(1);}}@ -webkit-keyframes测试{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/

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)

解决方案

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/

这篇关于添加关键帧类时，关键帧不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！