zoukankan      html  css  js  c++  java
  • 利用CSS3 中steps()制用动画

    .monster {
      width: 190px;
      height: 240px;
      margin: 2% auto;
      background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
      animation: play .8s steps(10) infinite;
    }
    
    @keyframes play {
        100% { background-position: -1900px; }
    }

    有一个在CSS动画一个鲜为人知的定时功能,可以让我们打破一个动画成段 - 或步骤 - 而不是运行它作为一个连续的动画从开始到结束。因为我们能够精确显示每个精灵形象作为一个框架,没有任何缓和效果插图中,此功能是用于创建精灵表的动画非常有用。

    steps()函数
    steps(),我们能够控制关键帧动画的时间呈现的数量;它发展的基础上,我们设置的值等距离步骤动画。知道了这一点,让我们使用steps()来创建一个简单的人物精灵表的动画。

    我的Illustrator画板来创建每个动画帧作为一个独立的190×240的图像,然后把北斗“spriting功能优势,以快速生成包含所有导出的图像水平精灵表。

    Adobe Illustrator artboards

    Creating the animation

    To animate our monster character, we’ll first create a rule where we define the width and height dimensions and display the main sprite sheet as a background image.

    .monster {
       190px;
      height: 240px;
      background: url('monster-sprite.png') left center;
    }

    Next, we need to create a keyframe rule that animates the background position of the sprite sheet. The sprite sheet’s total width is 1900px, so let’s animate it right-to-left by giving it a final background position of -1900px.

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

    Running the animation

    At this point, when we bind the play animation sequence to the .monster selector with a duration of .8s, we see the background position of our sprite sheet quickly animating from left to right.

    .monster {
      ...
      animation: play .8s;
    }

    To achieve the desired frame-by-frame animation effect, we’ll need to include the steps() timing function in the animation value. Since the sprite sheet contains 10 image sprites, we can say that it’s made up of 10 frames––or steps. So let’s define 10 steps in our animation sequence:

    .monster {
      ...
      animation: play .8s steps(10);
    }

    So now, the animation will run 10 frames in its .8s duration – it uses the background position animation to run through each sprite image as a step.

    Finally, if we set animation-iteration-count to infinite, it will render a repeating loop of the animation.

    .monster {
      ...
      animation: play .8s steps(10) infinite;
    }
  • 相关阅读:
    在ensp上配置Trunk接口
    在ensp上VLAN基础配置以及Access接口
    在ensp上的ARP及Proxy ARP
    在ensp上简单的配置交换机
    1000000 / 60S 的 RocketMQ 不停机,扩容,平滑升级!
    DE1-SOC 只要加载驱动VNC就断开(DE1-SOC 只要加载驱动串口就卡住)
    通过U盘拷贝文件到DE1-SOC 的 Linux系统
    Linux 系统响应来自 FPGA 端的中断的中断号到底怎么对应?(GIC控制器)
    HPS 访问 FPGA 方法之五—— 通过FPGA 中断访问
    HPS 访问 FPGA 方法之四—— 编写 Linux 字符设备驱动
  • 原文地址:https://www.cnblogs.com/sunshq/p/3861291.html
Copyright © 2011-2022 走看看