[Html5基础训练]animation的step使用方法


html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sprite Demotitle>
    <style>
      #an {
        width: 128px;
        height: 128px;
        background: url(img/spriteB.png);        
        animation: move infinite 4s steps(8,end);
      }
      /* -254，-384  x-1152  1024-128=    896 */
      @keyframes move {
        0% {
          background-position:0 -256px;
        }
        50% {
          background-position:-1024px -256px;
        } 
        50.001% {
          background-position:0 -384px;
        }
        100% {
          background-position:-1024px -384px;
        }        
        
      }
    style>
  head>
  <body>
    <div id="an">div>
  body>
html>

SpriteB图片下载:

相关阅读:
22、设计模式之状态模式（State）
PostGIS导入shp文件报错：dbf file (.dbf) can not be opened.
vue-router传参的四种方式超详细
Mysql常见指令以及用法(保姆级）
Oracle SQL执行计划（2）
基于价值的学习算法
一文理解OpenStack网络
c++ 学习之运算符重载之前置++和后置++
Redis（六）——Redis6的事务和锁机制（未完成，待补）
excel文件运行报错（xx.xlsx）不是有效的win32应用程序

原文地址：https://blog.csdn.net/vinglemar/article/details/133915968