【问题标题】:CSS sprite animation timing issuesCSS sprite 动画时间问题
【发布时间】:2015-03-10 23:11:09
【问题描述】:

我似乎无法获得正确的动画时间

http://codepen.io/anon/pen/ZYMgqE

.spinner {
          width: 36px;
          height: 36px;
          background: url('http://i.imgur.com/CYiaWsF.png') top center;
          animation: play 1s steps(10) infinite;
        }

        @keyframes play {
           100% { background-position: 0px -2844px; }
        }

我尝试了很多组合,但总是看起来像胶卷。

我做错了吗?我是否误解了 CSS 精灵动画?

【问题讨论】:

    标签: css css-animations css-sprites


    【解决方案1】:

    你的数学错了..我想。

    图片显然是 2844 像素高...所以步数应该是高度除以元素高度

    2844 / 36 = 79

    .spinner {
      width: 36px;
      height: 36px;
      background: url('http://i.imgur.com/CYiaWsF.png') top center;
      -webkit-animation: play 1s steps(79) infinite;
      animation: play 1s steps(79) infinite;
    }
    @-webkit-keyframes play {
      100% {
        background-position: 0px -2844px;
      }
    }
    @keyframes play {
      100% {
        background-position: 0px -2844px;
      }
    }
    <div class="spinner"></div>

    【讨论】:

    • 太棒了!没有一个教程这么说。我很敬畏这是一个我完全忽略的简单解决方案。
    猜你喜欢
    • 2013-09-03
    • 1970-01-01
    • 2014-05-12
    • 1970-01-01
    • 2023-04-07
    • 1970-01-01
    • 1970-01-01
    • 2014-02-02
    • 1970-01-01
    相关资源
    最近更新 更多