Question

我不知道css动画是否可行...我试图使用steps（）动画精灵但是某些帧的持续时间比其他帧长（帧＃1.5。帧，帧＃2 .2s，帧＃3 - ＃5 .1s等）。我尝试使用多步动画，但似乎没有用。有什么想法吗？

@keyframes throw{
    100% {background-position: 380px;}
}
@keyframes hold{
    100% {background-position: 760px;}
}
@keyframes drop{
    100% {background-position: 1520px;}
}


#cheerleader{
    position:absolute
    top: 110px;
    left: 15%;
    width: 190px;
    height: 240px;
    margin: 0 auto;
    background: url("/assets/images/cheer01.png") left center;
    animation:
        throw .5s steps(1, 2) infinite,
        hold .2s steps(3, 4),
        drop .8s steps(5, 8),
}

非常感谢任何帮助。谢谢！

我的更新代码是：

@keyframes hold{
    0% { background-position-x: 0px;  }
    100% {background-position-x: 160px;  }
}
@keyframes grab{
    0% {background-position-x: 160px; }
    100% {background-position-x: 480px; }
}
@keyframes propped{
    0% {background-position-x: 480px;}
    100% {background-position-x: 800px;}
}
@keyframes throw{
    0% {background-position-x: 800px;}
    100% {background-position-x: 960px;}
}
@keyframes catch{
    0% {background-position-x: 960px;}
    100% {background-position-x: 1280px;}
}

.cheerpeopleone{
    position:absolute;
    top:110px;
    left:15%;
    width:160px;
    height:320px;
    margin: 0 auto;
    background: url('/assets/images/cheerpeopleone.png') left center;
    animation: 
        hold 0.5s steps(1) infinite,
        grab 0.3s steps(3) infinite,
        propped 0.6s steps(2) infinite, 
        throw 0.2s steps(1) infinite, 
        catch 0.3s steps(3) infinite; 
    animation-delay: 0s, .5s, 0.8s, 1.4s, 1.6s;
    z-index:90;
}

但是现在我遇到了无限播放时延迟无效的问题。我也认为我的定位有一些事情，因为数字会滑入框架然后动画。 png的全宽为1280px，每帧宽160px。

Answer 1

是。它可以用纯CSS动画完成。我创建了一个总共6帧的演示，其中前两帧持续2s，接下来的2帧持续0.5s，最后2帧为3s。您也可以根据自己的要求调整animation-delay。

＆＃13;

@keyframes throw{
    0% { background-position: 0;  }
    100% {background-position: -512px;  }
}
@keyframes hold{
    0% {background-position: -512px; }
    100% {background-position: -1024px; }
}
@keyframes drop{
    0% {background-position: -1024px;}
    100% {background-position: -1280px;}
}


#cheerleader{
    position:absolute;
    top: 20px;
    left: 15%;
    width: 256px;
    height: 256px;
    margin: 0 auto;
    background: url("https://cdn.codeandweb.com/blog/2016/05/10/how-to-create-a-sprite-sheet/spritestrip.png") left center;
     -webkit-animation: throw 2s steps(2) forwards,
        hold 0.5s steps(2) forwards,
        drop 3s steps(1) forwards; 
      -webkit-animation-delay: 0s, 2s, 2.5s;
}

＆＃13;

<div id="cheerleader"></div>

＆＃13;

CSS Steps（），持续时间发生变化

1 个答案: