• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  广告

                  CSS3 animation逐帧动画

                  2018-11-22 14:51| 作者: admin| 查看: 1193| 评论: 0|来自: 蚂蚁部落

                  关于animation属性的基本用法可以参阅CSS3 animation一章节。

                  使用animation实现逐帧动画:

                  熟悉了animation的属性之后,得找个简单的小项目实现下。

                  思路很简单,就是给元素一个雪碧图的背景,然后添加的帧动画更改background-position。

                  关键代码如下:

                  [CSS] 纯文本查看 复制代码
                  @keyframes run{
                    from{
                      background-position: 0 0;
                    }
                    to{
                      background-position: -1540px 0 ;
                    }
                  }
                  div{
                    width:140px;
                    height:140px;
                    background: url(run.png) ;
                    animation-name:run;
                    animation-duration:1s;
                    animation-iteration-count:infinite;
                  }

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/22/145435gd6kj6l8ce8ccb4n.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  但是跑起来后我们发现,每帧动画之间帧动画都是滑动,并不是我们要的效果,为什么呢?

                  原来animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的

                  知道原因就好办了,解决思路就是:

                  [CSS] 纯文本查看 复制代码
                  @keyframes run{
                    0%, 8%{  /*动作一*/  }
                    9.2%, 17.2%{  /*动作二*/  }
                      ...
                  }

                  step1:动作之间停留8帧,0%设置动作一,动作一结束在8%

                  step2:动作之间过渡1.2帧,9.2%设置动作二,动作二结束在17.2%

                  完整代码:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  @keyframes run{
                    0%, 8%{  background-position: 0 0;  }
                    9.2%, 17.2%{  background-position: -140px 0;  }
                    18.4%, 26.4%{  background-position: -280px 0 ;  }
                    27.6%, 35.6%{  background-position: -420px 0 ;  }
                    36.8%, 44.8%{  background-position: -560px 0 ;  }
                    46%, 54%{  background-position: -700px 0 ;  }
                    55.2%, 63.2%{  background-position: -840px 0 ;  }
                    64.4%, 72.4%{  background-position: -980px 0 ;  }
                    73.6%, 81.6%{  background-position: -1120px 0 ;  }
                    82.8%, 90.8%{  background-position: -1400px 0 ;  }
                    92%, 100%{  background-position: -1540px 0 ;  }
                  }
                  @-webkit-keyframes run{
                    0%, 8%{  background-position: 0 0;  }
                    9.2%, 17.2%{  background-position: -140px 0;  }
                    18.4%, 26.4%{  background-position: -280px 0 ;  }
                    27.6%, 35.6%{  background-position: -420px 0 ;  }
                    36.8%, 44.8%{  background-position: -560px 0 ;  }
                    46%, 54%{  background-position: -700px 0 ;  }
                    55.2%, 63.2%{  background-position: -840px 0 ;  }
                    64.4%, 72.4%{  background-position: -980px 0 ;  }
                    73.6%, 81.6%{  background-position: -1120px 0 ;  }
                    82.8%, 90.8%{  background-position: -1400px 0 ;  }
                    92%, 100%{  background-position: -1540px 0 ;  }
                  }
                  div{
                    width:140px;
                    height:140px;
                    background: url(demo/CSS/img/run.png) ;
                    animation:run 1s infinite;
                    -webkit-animation:run 1s infinite;
                    animation-fill-mode : backwards;
                    -webkit-animation-fill-mode : backwards;
                  }
                  </style>
                  </head>
                  <body>
                  <div></div>
                  </body>
                  </html>

                  还有另外一个实现方法,就是利用steps(),就是帧之间的?#33258;?#21160;画,这个在w3c里面没有写,先贴个图:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/22/145448elzil8945htu7xh7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  由上图可知:

                  steps(1,start):动画一开始就跳到 100% 直到这一帧(不是整个周期)结束。

                  steps(1,end):保持 0% 的样式直到这一帧(不是整个周期)结束。

                  另外?#37096;?#20197;直接设置 animation-timing-function:step-start/step-end。

                  step-start效果等同于steps(1,start),step-end效果等同于steps(1,end)。

                  最终效果,因为录制的问题可能有点卡顿,有兴趣的同学可以直接复制代码去跑下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/22/145442m4ozsjiiq5tqgc15.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  完整代码:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  @keyframes run{
                    0%{
                      background-position: 0 0;
                    }
                    8.333%{
                      background-position: -140px 0;
                    }
                    16.666%{
                      background-position: -280px 0 ;
                    }
                    25.0%{
                      background-position: -420px 0 ;
                    }
                    33.333%{
                      background-position: -560px 0 ;
                    }
                    41.666%{
                      background-position: -700px 0 ;
                    }
                    50.0%{
                      background-position: -840px 0 ;
                    }
                    58.333%{
                      background-position: -980px 0 ;
                    }
                    66.666%{
                      background-position: -1120px 0 ;
                    }
                    75.0%{
                      background-position: -1260px 0 ;
                    }
                    83.333%{
                      background-position: -1400px 0 ;
                    }
                    91.666%{
                      background-position: -1540px 0 ;
                    }
                    100%{
                      background-position: 0 0 ;
                    }
                  }
                  @-webkit-keyframes run{
                    0%{
                      background-position: 0 0;
                    }
                    8.333%{
                      background-position: -140px 0;
                    }
                    16.666%{
                      background-position: -280px 0 ;
                    }
                    25.0%{
                      background-position: -420px 0 ;
                    }
                    33.333%{
                      background-position: -560px 0 ;
                    }
                    41.666%{
                      background-position: -700px 0 ;
                    }
                    50.0%{
                      background-position: -840px 0 ;
                    }
                    58.333%{
                      background-position: -980px 0 ;
                    }
                    66.666%{
                      background-position: -1120px 0 ;
                    }
                    75.0%{
                      background-position: -1260px 0 ;
                    }
                    83.333%{
                      background-position: -1400px 0 ;
                    }
                    91.666%{
                      background-position: -1540px 0 ;
                    }
                    100%{
                      background-position: 0 0 ;
                    }
                  }
                  div{
                    width:140px;
                    height:140px;
                    background: url(demo/CSS/img/run.png) ;
                    animation:run 1s steps(1, start) infinite;
                    -webkit-animation:run 1s steps(1, start) infinite;
                  }
                  </style>
                  </head>
                  <body>
                  <div></div>
                  </body>
                  </html>

                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>