steps animation

  1 <!DOCTYPE html>
  2     <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>css3逐帧动画</title>
  6         <style>
  7         @keyframes run{
  8             0%{
  9                 background-position: 0 0;
 10             }
 11             8.333%{
 12                 background-position: -140px 0;
 13             }
 14             16.666%{
 15                 background-position: -280px 0 ;
 16             }
 17             25.0%{
 18                 background-position: -420px 0 ;
 19             }
 20             33.333%{
 21                 background-position: -560px 0 ;
 22             }
 23             41.666%{
 24                 background-position: -700px 0 ;
 25             }
 26             50.0%{
 27                 background-position: -840px 0 ;
 28             }
 29             58.333%{
 30                 background-position: -980px 0 ;
 31             }
 32             66.666%{
 33                 background-position: -1120px 0 ;
 34             }
 35             75.0%{
 36                 background-position: -1260px 0 ;
 37             }
 38             83.333%{
 39                 background-position: -1400px 0 ;
 40             }
 41             91.666%{
 42                 background-position: -1540px 0 ;
 43             }
 44             100%{
 45                 background-position: 0 0 ;
 46             }
 47         }
 48         @-webkit-keyframes run{
 49             0%{
 50                 background-position: 0 0;
 51             }
 52             8.333%{
 53                 background-position: -140px 0;
 54             }
 55             16.666%{
 56                 background-position: -280px 0 ;
 57             }
 58             25.0%{
 59                 background-position: -420px 0 ;
 60             }
 61             33.333%{
 62                 background-position: -560px 0 ;
 63             }
 64             41.666%{
 65                 background-position: -700px 0 ;
 66             }
 67             50.0%{
 68                 background-position: -840px 0 ;
 69             }
 70             58.333%{
 71                 background-position: -980px 0 ;
 72             }
 73             66.666%{
 74                 background-position: -1120px 0 ;
 75             }
 76             75.0%{
 77                 background-position: -1260px 0 ;
 78             }
 79             83.333%{
 80                 background-position: -1400px 0 ;
 81             }
 82             91.666%{
 83                 background-position: -1540px 0 ;
 84             }
 85             100%{
 86                 background-position: 0 0 ;
 87             }
 88         }
 89         div{
 90             width:140px;
 91             height:140px;
 92             background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
 93             animation:run 1s steps(1, start) infinite;
 94                 -webkit-animation:run 1s steps(1, start) infinite;
 95         }
 96         </style>
 97     </head>
 98     <body>
 99         <div></div>
100     </body>

PS 摘自：http://www.cnblogs.com/Fengzp/p/5548493.html#

时间： 2024-09-20 17:29:50

steps animation的相关文章

css3 animation steps制作饿了么loading

html代码 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <style type="text/css"> .load2 { position: absolute; width:200px; height:160px; background: url('data:image/svg+xml;base64,PHN2Zy

深入理解CSS3 Animation 帧动画 ( steps )

作者:Aaron的博客网址:http://www.cnblogs.com/aaronjs/p/4642015.html -------------------------------------------------------------------------------------------------------------------------------- CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是

CSS3 animation的steps方式过渡

animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的.除了ease,linear.cubic-bezier之类的过渡函数都会为其插入补间. 但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式. 比如GIF动图不支持程序对播放的控制,也不支持Alpha通道.但如果我们用一个 PNG图片,把所有帧都放在一起,通过CSS3的animation控制background-position 来播放就可以做到这些. <style> @

animation steps属性实现帧动画

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></tit

css3中animation属性animation-timing-function知识点以及其属性值steps()

在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n,n,n,n),你平时用到的linear.ease.ease-out等都是基于这个属性值的,那么我们接下来就看看这个东西到底是什么含义. 这个时间函数是通过一个坐标反映出来的: 这个就是timing-function的工作图,总共有4个点来描述整个曲线的运动形状,其中P0和P3是开始和截止的位置,关

css3 animation 中的 steps

steps Specifies a stepping function, described above, taking two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the

css动画-animation各个属性详解（转）

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

关于帧动画steps属性的理解

CSS3的Animation有八个属性 animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode animation-timing-function 其中1-7大多都有介绍,但是animation-timing-function是控制时间的属性在取值中除了常用到的三次贝塞尔曲线

css3的animation动画

用的前提考虑浏览器是否支持, internet Explorer10.firefox.opera是支持keyframes规范和animation属性的,而safari和chrome则要使用前缀-webkit-. webapp中: ?注意:internet explorer9及其更早的版本不支持keyframes规范和animation属性. 学习animation,要先学习@keyframes 规则关于keyframes: from{}to{}来创建动画效果.除了fromto之外,还可以用