init: репозиторий backgrounds

— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
2026-04-04 22:17:14 +03:00
commit 4bbe7f68da
21 changed files with 3287 additions and 0 deletions
@@ -0,0 +1,20 @@
+# 🌌 Animated Web Backgrounds
+
+Коллекция эффектных и легких фонов для веб-проектов.
+Почти все решения реализованы на **Pure CSS**, что обеспечивает высокую производительность без использования JavaScript (за исключением интерактивных элементов в Steps Animation).
+
+## Каталог фонов
+
+| Превью | Компонент (Путь к папке)                          | Стиль     | Технология                  |
+| :----- | :------------------------------------------------ | :-------- | :-------------------------- |
+| 🧊     | **[animated-cubes](./animated-cubes/)**           | Геометрия | CSS Keyframes & Scale       |
+| 🪐     | **[solar-system-orrery](./solar-system-orrery/)** | Космос    | CSS Orbital Motion          |
+| 🌌     | **[parallax-star](./parallax-star/)**             | Космос    | CSS Box-Shadow Parallax     |
+| ✨     | **[fireflies](./fireflies/)**                     | Энергия   | CSS Keyframes & Glow        |
+| 🏃     | **[steps-sprite](./steps-animation/)**            | Спрайт    | CSS Steps & **JS (jQuery)** |
+
+## Технологии
+
+- **HTML5** (Минималистичная разметка)
+- **CSS3** (Animations, Transforms, Custom Properties)
+- **JavaScript / jQuery** (Только для управления в Steps Animation)
@@ -0,0 +1,15 @@
+# 🧊 Animated Cubes Background
+
+Геометрический анимированный фон с разлетающимися и вращающимися кубами. Создает эффект глубины и динамики для лендингов или героических (Hero) секций.
+
+### Особенности
+
+- **3D Motion**: Использование `scale` и `rotate` в одном ключевом кадре создает иллюзию полета кубов из центра.
+- **Pure CSS**: Анимация работает без JavaScript, что минимизирует нагрузку на браузер.
+- **Staggered Effect**: Разное время появления кубов реализовано через `animation-delay`.
+
+### Технические детали
+
+- **Animation**: Основной цикл `cube` длится 12 секунд с плавным затуханием (`opacity: 0`).
+- **Positions**: Кубы распределены по экрану с помощью `vw` (ширина) и `vh` (высота).
+- **Typography**: Используется шрифт **Montserrat**, импортируемый из Google Fonts.
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Animated Cubes Background</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="hero"> 
+  <div class="hero__title">Hello World</div>
+  <div class="cube"></div>
+  <div class="cube"></div>
+  <div class="cube"></div>
+  <div class="cube"></div>
+  <div class="cube"></div>
+  <div class="cube"></div>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
@@ -0,0 +1,94 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.hero {
+  background-color: #0040c1;
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+  font-family: "Montserrat", sans-serif;
+}
+
+.hero__title {
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 50px;
+  z-index: 1;
+}
+
+.cube {
+  position: absolute;
+  top: 80vh;
+  left: 45vw;
+  width: 10px;
+  height: 10px;
+  border: solid 1px #003298;
+  transform-origin: top left;
+  transform: scale(0) rotate(0deg) translate(-50%, -50%);
+  -webkit-animation: cube 12s ease-in forwards infinite;
+  animation: cube 12s ease-in forwards infinite;
+}
+.cube:nth-child(2n) {
+  border-color: #0051f4;
+}
+.cube:nth-child(2) {
+  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
+  left: 25vw;
+  top: 40vh;
+}
+.cube:nth-child(3) {
+  -webkit-animation-delay: 4s;
+  animation-delay: 4s;
+  left: 75vw;
+  top: 50vh;
+}
+.cube:nth-child(4) {
+  -webkit-animation-delay: 6s;
+  animation-delay: 6s;
+  left: 90vw;
+  top: 10vh;
+}
+.cube:nth-child(5) {
+  -webkit-animation-delay: 8s;
+  animation-delay: 8s;
+  left: 10vw;
+  top: 85vh;
+}
+.cube:nth-child(6) {
+  -webkit-animation-delay: 10s;
+  animation-delay: 10s;
+  left: 50vw;
+  top: 10vh;
+}
+
+@-webkit-keyframes cube {
+  from {
+    transform: scale(0) rotate(0deg) translate(-50%, -50%);
+    opacity: 1;
+  }
+  to {
+    transform: scale(20) rotate(960deg) translate(-50%, -50%);
+    opacity: 0;
+  }
+}
+
+@keyframes cube {
+  from {
+    transform: scale(0) rotate(0deg) translate(-50%, -50%);
+    opacity: 1;
+  }
+  to {
+    transform: scale(20) rotate(960deg) translate(-50%, -50%);
+    opacity: 0;
+  }
+}
@@ -0,0 +1,76 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
+
+.hero {
+  background-color: #0040C1;
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+  font-family: 'Montserrat', sans-serif;
+}
+
+.hero__title {
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 50px;
+  z-index: 1;
+}
+
+.cube {
+  position: absolute;
+  top: 80vh;
+  left: 45vw;
+  width: 10px;
+  height: 10px;
+  border: solid 1px darken(#0040C1, 8%);
+  transform-origin: top left;
+  transform: scale(0) rotate(0deg) translate(-50%, -50%);
+  animation: cube 12s ease-in forwards infinite;
+  
+  &:nth-child(2n) {
+    border-color: lighten(#0040C1, 10%);
+  }
+  
+  &:nth-child(2) {
+    animation-delay: 2s;
+    left: 25vw;
+    top: 40vh;
+  }
+  
+  &:nth-child(3) {
+    animation-delay: 4s;
+    left: 75vw;
+    top: 50vh;
+  }
+  
+  &:nth-child(4) {
+    animation-delay: 6s;
+    left: 90vw;
+    top: 10vh;
+  }
+  
+  &:nth-child(5) {
+    animation-delay: 8s;
+    left: 10vw;
+    top: 85vh;
+  }
+  
+  &:nth-child(6) {
+    animation-delay: 10s;
+    left: 50vw;
+    top: 10vh;
+  }
+}
+
+@keyframes cube {
+  from {
+    transform: scale(0) rotate(0deg) translate(-50%, -50%);   
+    opacity: 1;
+  }
+  to {
+    transform: scale(20) rotate(960deg) translate(-50%, -50%); 
+    opacity: 0;
+  }
+}
@@ -0,0 +1,15 @@
+# ✨ CSS Fireflies Background
+
+Элегантный и спокойный фон с анимированными светлячками. Полностью реализован на чистом HTML/CSS, создавая глубокую атмосферу за счет хаотичного движения и мягкого мерцания.
+
+### Особенности
+
+- **Natural Motion**: Каждый светлячок движется по уникальной траектории, заданной через сложные `@keyframes` (move1, move2 и т.д.).
+- **Double Animation**: Элементы используют комбинацию зацикленного движения (`drift`) и мерцания (`flash`).
+- **Zero JS**: Анимация не требует скриптов и работает плавно благодаря аппаратной поддержке трансформаций.
+
+### Технические детали
+
+- **Particles**: Светлячки созданы с использованием псевдоэлементов `::before` (тень/тело) и `::after` (свечение).
+- **Glow**: Эффект свечения реализован через `box-shadow: yellow` с анимацией прозрачности.
+- **Randomization**: Разнообразие достигается за счет использования `nth-child` с разными задержками и длительностью анимации.
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Fireflies</title>
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!-- Quantity should be the same in Sass-->
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<div class="firefly"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
@@ -0,0 +1,75 @@
+// Quantity should be the same in PUG
+$quantity: 15
+
+html, body
+  height: 100%
+
+body
+  background: url(https://i.pinimg.com/originals/44/6e/3b/446e3b79395a287ca32f7977dd83b290.jpg)
+  background-size: cover
+    
+.firefly
+  position: fixed
+  left: 50%
+  top: 50%
+  width: 0.4vw
+  height: 0.4vw
+  margin: -0.2vw 0 0 9.8vw
+  animation: ease 200s alternate infinite
+  pointer-events: none
+
+  &::before,
+  &::after
+    content: ''
+    position: absolute
+    width: 100%
+    height: 100%
+    border-radius: 50%
+    transform-origin: -10vw
+  
+  &::before
+    background: black
+    opacity: 0.4
+    animation: drift ease alternate infinite
+  
+  &::after
+    background: white
+    opacity: 0
+    box-shadow: 0 0 0vw 0vw yellow
+    animation: drift ease alternate infinite, flash ease infinite
+
+  
+// Randomize Fireflies Motion
+@for $i from 1 through $quantity
+  
+  $steps: random(12) + 16
+  $rotationSpeed: random(10) + 8s
+  
+  .firefly:nth-child(#{$i})
+    animation-name: move#{$i}
+
+    &::before
+      animation-duration: #{$rotationSpeed}
+
+    &::after
+      animation-duration: #{$rotationSpeed}, random(6000) + 5000ms
+      animation-delay: 0ms, random(8000) + 500ms
+
+  @keyframes move#{$i}
+    @for $step from 0 through $steps
+      #{$step * (100 / $steps)}%
+        transform: translateX(random(100) - 50vw) translateY(random(100) - 50vh) scale(random(75) / 100 + .25)
+
+@keyframes drift
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(360deg)
+
+@keyframes flash
+  0%, 30%, 100%
+    opacity: 0
+    box-shadow: 0 0 0vw 0vw yellow
+  5%
+    opacity: 1
+    box-shadow: 0 0 2vw 0.4vw yellow
@@ -0,0 +1,15 @@
+# 🌌 Parallax Star Background
+
+Многослойный анимированный фон звездного неба с эффектом параллакса. Звезды разного размера движутся с разной скоростью, создавая ощущение полета сквозь глубокий космос.
+
+### Особенности
+
+- **Performance Optimized**: Сотни звезд генерируются как тени (`box-shadow`) одного элемента, что значительно экономит ресурсы процессора.
+- **Parallax Effect**: Три слоя звезд (`#stars`, `#stars2`, `#stars3`) движутся с разной скоростью, создавая иллюзию объема.
+- **Pure CSS**: Вся логика анимации и визуализации построена на стандартных свойствах CSS без использования тяжелых JS-библиотек.
+
+### Технические детали
+
+- **Background**: Используется `radial-gradient` для создания мягкого свечения у горизонта.
+- **Keyframes**: Анимация `animStar` плавно перемещает слои снизу вверх, зацикливая движение.
+- **Sass Origin**: Оригинальный код был сгенерирован функцией Sass для рандомизации координат, в текущем репозитории представлена чистая CSS-версия.
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Parallax Star background in CSS</title>
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
+<div id='stars'></div>
+<div id='stars2'></div>
+<div id='stars3'></div>
+<div id='title'>
+  <span>
+    PURE CSS
+  </span>
+  <br>
+  <span>
+    PARALLAX PIXEL STARS
+  </span>
+</div>
+<!-- partial -->
+<script  src="./script.js"></script>
+
+</body>
+</html>
@@ -0,0 +1,95 @@
+@import compass
+
+
+// n is number of stars required
+@function multiple-box-shadow ($n) 
+  $value: '#{random(2000)}px #{random(2000)}px #FFF'
+  @for $i from 2 through $n
+    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'
+
+  @return unquote($value)
+
+$shadows-small:  multiple-box-shadow(700)
+$shadows-medium: multiple-box-shadow(200)
+$shadows-big:    multiple-box-shadow(100)
+
+html
+  height: 100%
+  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
+  overflow: hidden
+    
+#stars
+  width: 1px
+  height: 1px
+  background: transparent
+  box-shadow: $shadows-small
+  animation			: animStar 50s linear infinite
+    
+  &:after
+    content: " "
+    position: absolute
+    top: 2000px
+    width: 1px
+    height: 1px
+    background: transparent
+    box-shadow: $shadows-small
+    
+#stars2
+  width: 2px
+  height: 2px
+  background: transparent
+  box-shadow: $shadows-medium
+  animation			: animStar 100s linear infinite
+    
+  &:after
+    content: " "
+    position: absolute
+    top: 2000px
+    width: 2px
+    height: 2px
+    background: transparent
+    box-shadow: $shadows-medium
+    
+#stars3
+  width: 3px
+  height: 3px
+  background: transparent
+  box-shadow: $shadows-big
+  animation			: animStar 150s linear infinite
+    
+  &:after
+    content: " "
+    position: absolute
+    top: 2000px
+    width: 3px
+    height: 3px
+    background: transparent
+    box-shadow: $shadows-big
+
+#title
+  position: absolute
+  top: 50%
+  left: 0
+  right: 0
+  
+  color: #FFF
+  text-align: center
+  font-family: 'lato',sans-serif
+  font-weight: 300
+  font-size: 50px
+  letter-spacing: 10px
+  
+  margin-top: -60px
+  padding-left: 10px
+  
+  span
+    background: -webkit-linear-gradient(white, #38495a)
+    -webkit-background-clip: text
+    -webkit-text-fill-color: transparent
+    
+@keyframes animStar
+  from	
+    transform: translateY(0px)
+  to		
+    transform: translateY(-2000px)
+    
@@ -0,0 +1,15 @@
+# 🪐 Solar System Orrery
+
+Масштабная интерактивная модель Солнечной системы (Orrery), реализованная на чистом CSS3. Проект включает в себя Солнце и все планеты, вращающиеся по своим орбитам с реалистичным соотношением скоростей.
+
+### Особенности
+
+- **Pure CSS Motion**: Каждая планета использует уникальную анимацию `@keyframes` для вращения по орбите.
+- **Visual Accuracy**: Соблюдены относительные размеры планет и периоды их обращения (от быстрого Меркурия до медленного Плутона).
+- **Infinite Background**: Использование повторяющегося звездного фона для создания эффекта глубокого космоса.
+
+### Технические детали
+
+- **Orbital Mechanics**: Анимация реализована через двойную трансформацию (`rotate` -> `translateY` -> `rotate`), что позволяет планетам сохранять вертикальную ориентацию во время вращения.
+- **Timing**: Значения `animation-duration` подобраны в соответствии с реальными астрономическими данными.
+- **Layers**: Четкое разделение слоев (`z-index`) для планет и их орбитальных путей (`-path`).
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Solar System Orrery</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="system">
+  <div class="sun"></div>
+  <div class="mer-path"></div>
+    <div class="mer"></div>
+  <div class="ven-path"></div>
+  <div class="ven"></div>
+  <div class="ear-path"></div>
+  <div class="ear"><div class="lune"></div></div>
+  <div class="mar-path"></div>
+  <div class="mar">
+    <div class="pho"></div>
+    <div class="dem"></div>
+  </div>
+  <div class="jup-path"></div>
+  <div class="jup">
+    <div class="spot"></div>
+    <div class="jove io"></div>
+    <div class="jove eur"></div>
+    <div class="jove gan"></div>
+    <div class="jove cal"></div>
+  </div>
+  <div class="sat-path"></div>
+  <div class="sat">
+    <div class="f-ring"></div>
+    <div class="a-ring"></div>
+    <div class="b-ring"></div>
+    <div class="c-ring"></div>
+  </div>
+  <div class="ura-path"></div>
+  <div class="ura">
+    <div class="e-ring"></div>
+  </div>
+  <div class="nep-path"></div>
+  <div class="nep">
+    <div class="spot"></div>
+  </div>
+  <div class="plu-path"></div>
+  <div class="plu"></div>
+</div>
+<!-- partial -->
+
+</body>
+</html>
@@ -0,0 +1,696 @@
+body {
+  background-color: #012;
+  background-image: url("https://cssanimation.rocks/starwars/images/bg.jpg");
+  background-size: 33%;
+  background-repeat: repeat;
+  min-height: 2025px;
+}
+
+.system {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(0.75);
+}
+
+.sun {
+  width: 144px;
+  height: 144px;
+  border-radius: 72px;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -72px;
+  background-image: url("http://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_HMIIF.jpg");
+  background-size: 144px;
+  background-repeat: no-repeat;
+}
+
+@-webkit-keyframes rot-mer {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-84px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-84px) rotate(-360deg);
+  }
+}
+@-keyframes rot-mer {
+  from {
+    transform: rotate(0deg) translatey(-84px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-84px) rotate(-360deg);
+  }
+}
+.mer {
+  width: 3.5px;
+  height: 3.5px;
+  border-radius: 50%;
+  background-color: #888;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -1.75px;
+  -webkit-animation: rot-mer 0.88s infinite linear;
+  animation: rot-mer 0.88s infinite linear;
+  z-index: 200;
+}
+
+.mer-path {
+  width: 168px;
+  height: 168px;
+  border-radius: 50%;
+  z-index: 100;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -84px;
+  border: solid 1px #444;
+}
+
+@-webkit-keyframes rot-ven {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-90px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-90px) rotate(-360deg);
+  }
+}
+@-keyframes rot-ven {
+  from {
+    transform: rotate(0deg) translatey(-90px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-90px) rotate(-360deg);
+  }
+}
+.ven {
+  width: 5.5px;
+  height: 5.5px;
+  border-radius: 50%;
+  background-color: #f5f9be;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -2.75px;
+  -webkit-animation: rot-ven 2.25s infinite linear;
+  animation: rot-ven 2.25s infinite linear;
+  z-index: 200;
+}
+
+.ven-path {
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  z-index: 100;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -90px;
+  border: solid 1px #444;
+}
+
+@-webkit-keyframes rot-ear {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-102px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-102px) rotate(-360deg);
+  }
+}
+@-keyframes rot-ear {
+  from {
+    transform: rotate(0deg) translatey(-102px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-102px) rotate(-360deg);
+  }
+}
+.ear {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background-color: #4b94f9;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -3.5px;
+  -webkit-animation: rot-ear 3.65s infinite linear;
+  animation: rot-ear 3.65s infinite linear;
+  z-index: 200;
+}
+
+.ear-path {
+  width: 204px;
+  height: 204px;
+  border-radius: 50%;
+  z-index: 100;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -102px;
+  border: solid 1px #444;
+}
+
+@-webkit-keyframes rot-mar {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-118px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-118px) rotate(-360deg);
+  }
+}
+@-keyframes rot-mar {
+  from {
+    transform: rotate(0deg) translatey(-118px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-118px) rotate(-360deg);
+  }
+}
+.mar {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #dd411a;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -3px;
+  -webkit-animation: rot-mar 6.87s infinite linear;
+  animation: rot-mar 6.87s infinite linear;
+  z-index: 200;
+}
+
+.mar-path {
+  width: 236px;
+  height: 236px;
+  border-radius: 50%;
+  z-index: 100;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -118px;
+  border: solid 1px #444;
+}
+
+@-webkit-keyframes rot-jup {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-228px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-228px) rotate(-360deg);
+  }
+}
+@-keyframes rot-jup {
+  from {
+    transform: rotate(0deg) translatey(-228px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-228px) rotate(-360deg);
+  }
+}
+.jup {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background-color: #eaad3b;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -35px;
+  -webkit-animation: rot-jup 43.32s infinite linear;
+  animation: rot-jup 43.32s infinite linear;
+  z-index: 200;
+}
+
+.jup-path {
+  width: 456px;
+  height: 456px;
+  border-radius: 50%;
+  z-index: 100;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -228px;
+  border: solid 1px #444;
+}
+
+@-webkit-keyframes rot-sat {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-362px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-362px) rotate(-360deg);
+  }
+}
+@-keyframes rot-sat {
+  from {
+    transform: rotate(0deg) translatey(-362px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-362px) rotate(-360deg);
+  }
+}
+.sat {
+  width: 58px;
+  height: 58px;
+  border-radius: 50%;
+  background-color: #d6cd93;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -29px;
+  -webkit-animation: rot-sat 107.59s infinite linear;
+  animation: rot-sat 107.59s infinite linear;
+  z-index: 200;
+}
+
+.sat-path {
+  width: 724px;
+  height: 724px;
+  border-radius: 50%;
+  z-index: 100;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -362px;
+  border: solid 1px #444;
+}
+
+@-webkit-keyframes rot-ura {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-648px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-648px) rotate(-360deg);
+  }
+}
+@-keyframes rot-ura {
+  from {
+    transform: rotate(0deg) translatey(-648px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-648px) rotate(-360deg);
+  }
+}
+.ura {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background-color: #bfeef2;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -13px;
+  -webkit-animation: rot-ura 306.87s infinite linear;
+  animation: rot-ura 306.87s infinite linear;
+  z-index: 200;
+}
+
+.ura-path {
+  width: 1296px;
+  height: 1296px;
+  border-radius: 50%;
+  z-index: 100;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -648px;
+  border: solid 1px #444;
+}
+
+@-webkit-keyframes rot-nep {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-972px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-972px) rotate(-360deg);
+  }
+}
+@-keyframes rot-nep {
+  from {
+    transform: rotate(0deg) translatey(-972px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-972px) rotate(-360deg);
+  }
+}
+.nep {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #363ed7;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -12px;
+  -webkit-animation: rot-nep 601.9s infinite linear;
+  animation: rot-nep 601.9s infinite linear;
+  z-index: 200;
+}
+
+.nep-path {
+  width: 1944px;
+  height: 1944px;
+  border-radius: 50%;
+  z-index: 100;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -972px;
+  border: solid 1px #444;
+}
+
+@-webkit-keyframes rot-plu {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-1246px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
+  }
+}
+@-keyframes rot-plu {
+  from {
+    transform: rotate(0deg) translatey(-1246px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
+  }
+}
+.plu {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: #963;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -1.5px;
+  -webkit-animation: rot-plu 904.65s infinite linear;
+  animation: rot-plu 904.65s infinite linear;
+  z-index: 200;
+}
+
+.plu-path {
+  width: 2492px;
+  height: 2492px;
+  border-radius: 50%;
+  z-index: 100;
+  position: absolute;
+  top: 1066.6666666667px;
+  left: 50%;
+  margin: -1246px;
+  border: solid 1px #444;
+}
+
+@-webkit-keyframes rot-lune {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
+  }
+}
+@-keyframes rot-lune {
+  from {
+    transform: rotate(0deg) translatey(-7px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-7px) rotate(-360deg);
+  }
+}
+.lune {
+  width: 2px;
+  height: 2px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -1.5px;
+  -webkit-animation: rot-lune 0.27s infinite linear;
+  animation: rot-lune 0.27s infinite linear;
+}
+
+.mar {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    #fff,
+    #fff 1px,
+    transparent 1px,
+    transparent 5px
+  );
+}
+
+@-webkit-keyframes rot-pho {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
+  }
+}
+@-keyframes rot-pho {
+  from {
+    transform: rotate(0deg) translatey(-7px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-7px) rotate(-360deg);
+  }
+}
+@-webkit-keyframes rot-dem {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-9px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-9px) rotate(-360deg);
+  }
+}
+@-keyframes rot-dem {
+  from {
+    transform: rotate(0deg) translatey(-9px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-9px) rotate(-360deg);
+  }
+}
+.pho,
+.dem {
+  width: 1px;
+  height: 1px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.pho {
+  margin: -1px;
+  -webkit-animation: rot-pho 0.15s infinite linear;
+  animation: rot-pho 0.15s infinite linear;
+}
+
+.dem {
+  margin: -1px;
+  -webkit-animation: rot-dem 0.2s infinite linear;
+  animation: rot-dem 0.2s infinite linear;
+}
+
+.jove {
+  width: 2px;
+  height: 2px;
+  background-color: #fff;
+  position: absolute;
+  top: 35px;
+  left: 50%;
+}
+
+@-webkit-keyframes rot-io {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-39px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-39px) rotate(-360deg);
+  }
+}
+@-keyframes rot-io {
+  from {
+    transform: rotate(0deg) translatey(-39px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-39px) rotate(-360deg);
+  }
+}
+@-webkit-keyframes rot-eur {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-41px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-41px) rotate(-360deg);
+  }
+}
+@-keyframes rot-eur {
+  from {
+    transform: rotate(0deg) translatey(-41px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-41px) rotate(-360deg);
+  }
+}
+@-webkit-keyframes rot-gan {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-45px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-45px) rotate(-360deg);
+  }
+}
+@-keyframes rot-gan {
+  from {
+    transform: rotate(0deg) translatey(-45px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-45px) rotate(-360deg);
+  }
+}
+@-webkit-keyframes rot-cal {
+  from {
+    -webkit-transform: rotate(0deg) translatey(-53px) rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg) translatey(-53px) rotate(-360deg);
+  }
+}
+@-keyframes rot-cal {
+  from {
+    transform: rotate(0deg) translatey(-53px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translatey(-53px) rotate(-360deg);
+  }
+}
+.io {
+  -webkit-animation: rot-io 0.2s infinite linear;
+  animation: rot-io 0.2s infinite linear;
+}
+
+.eur {
+  -webkit-animation: rot-eur 0.35s infinite linear;
+  animation: rot-eur 0.35s infinite linear;
+}
+
+.gan {
+  -webkit-animation: rot-gan 0.7s infinite linear;
+  animation: rot-gan 0.7s infinite linear;
+}
+
+.cal {
+  -webkit-animation: rot-cal 1.65s infinite linear;
+  animation: rot-cal 1.65s infinite linear;
+}
+
+.jup {
+  background-image: repeating-linear-gradient(
+    6deg,
+    #797663 22px,
+    #e1dcde 16px,
+    #c3a992 30px,
+    #e9ece2 30px
+  );
+}
+
+.spot {
+  position: absolute;
+  width: 16px;
+  height: 12px;
+  border-radius: 8px/6px;
+  top: 45px;
+  left: 50%;
+  background-color: #bc833b;
+  box-shadow: 0px 0px 5px #e1dcde;
+  border: solid 1px #e1dcde;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  z-index: 300;
+}
+.nep .spot {
+  background-color: #29319d;
+  border: 0;
+  box-shadow: none;
+  top: 50%;
+  left: 45%;
+  width: 10px;
+  height: 6px;
+  margin: -2px;
+  border-radius: 5px/3px;
+  border-left: solid 1px #7ed6fe;
+}
+
+div[class$="-ring"] {
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  opacity: 0.7;
+  transform: rotatex(45deg);
+}
+
+.a-ring {
+  border: solid 5px #96866f;
+  width: 119px;
+  height: 119px;
+  margin: -64.5px;
+}
+
+.b-ring {
+  border: solid 10px #554c3c;
+  width: 104px;
+  height: 104px;
+  margin: -62px;
+}
+
+.c-ring {
+  border: solid 9px #574f4a;
+  width: 95px;
+  height: 95px;
+  margin: -56.5px;
+}
+
+.f-ring {
+  border: solid 2px #908e8d;
+  width: 133px;
+  height: 133px;
+  margin: -68.5px;
+}
+
+.e-ring {
+  border: solid 7px #908e8d;
+  width: 76px;
+  height: 76px;
+  margin: -45px;
+  transform: rotatex(0deg) rotatey(89deg) !important;
+}
+
+.plu,
+.plu-path {
+  top: 1354.0666666667px;
+}
@@ -0,0 +1,350 @@
+/**
+ * I was out the other evening looking at Venus with the setting sun and thought, I wonder where all the planets
+ * are in relation to each other right now. I knew what an Orrery was, but I'd never built one. So, given my mate
+ * Donovan's (@donovanh: http://cssanimation.rocks/) penchant for CSS animation, I thought I'd give it a go 
+ * building one in pure CSS.
+ * 
+ * Many thanks to @aidandore and @iandevlin too for suggestions and improvements
+ *
+ * Chin up Pluto. You'll always be a planet to me... 
+ *
+ * Tady: http://tady.me
+ * @tadywankenobi
+ */
+
+/**
+ * Move in a circle without wrapper elements
+ * Idea by Aryeh Gregor, simplified by Lea Verou, borrowed by me!
+ */
+
+@mixin vp-anim($radius,$pname, $deg: 360deg) {
+  @-webkit-keyframes rot-#{$pname} {
+    from {
+      -webkit-transform: rotate(0deg)
+                 translatey(-$radius)
+                 rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg)
+                 translatey(-$radius) 
+                 rotate(-$deg);
+    }
+  }
+  @-moz-keyframes rot-#{$pname} {
+    from {
+      -moz-transform: rotate(0deg)
+                 translatey(-$radius)
+                 rotate(0deg);
+    }
+    to {
+      -moz-transform: rotate(360deg)
+                 translatey(-$radius) 
+                 rotate(-$deg);
+    }
+  }
+  @-keyframes rot-#{$pname} {
+    from {
+      transform: rotate(0deg)
+                 translatey(-$radius)
+                 rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg)
+                 translatey(-$radius) 
+                 rotate(-$deg);
+    }
+  }
+}
+
+$baseUnit: 0.1;        // Speed of Orrery. At 1, 1 sec = 1 day
+$sunRad: 72px;          // Radius of the sun, added to orbit radii
+$rFactor: 2;            // Adding a radius factor so orbit radii are easier to observe
+$middleOffset: 800px;
+
+$scale: 0.75;              // Play around with changing this to change the visible motion default: 0.75
+
+$middle: $middleOffset*(1/$scale);
+
+$planets: (
+  ('mer',8.8s*$baseUnit,(6px*$rFactor)+$sunRad,1.75px,#888),
+  ('ven',22.5s*$baseUnit,(9px*$rFactor)+$sunRad,2.75px,#f5f9be),
+  ('ear',36.5s*$baseUnit,(15px*$rFactor)+$sunRad,3.5px,#4b94f9),
+  ('mar',68.7s*$baseUnit,(23px*$rFactor)+$sunRad,3px,#dd411a),
+  ('jup',433.2s*$baseUnit,(78px*$rFactor)+$sunRad,35px,#eaad3b),
+  ('sat',1075.9s*$baseUnit,(145px*$rFactor)+$sunRad,29px,#d6cd93),
+  ('ura',3068.7s*$baseUnit,(288px*$rFactor)+$sunRad,13px,#bfeef2),
+  ('nep',6019s*$baseUnit,(450px*$rFactor)+$sunRad,12px,#363ed7),
+  ('plu',9046.5s*$baseUnit,(587px*$rFactor)+$sunRad,1.5px,#963)
+ );
+
+body {
+  background-color: #012;
+  background-image: url('https://cssanimation.rocks/starwars/images/bg.jpg');
+  background-size: 33%;
+  background-repeat: repeat;
+  min-height: 2700px * $scale;
+}
+
+
+.system {
+  position:relative;
+  top: 0; left: 0;
+  width:100%;
+  height:100%;
+  -webkit-transform: scale($scale);
+  -moz-transform: scale($scale);
+  transform: scale($scale);
+}
+
+.sun {
+  width: $sunRad*2;
+  height:$sunRad*2;
+  border-radius: $sunRad;
+  position:absolute;
+  top: $middle;
+  left:50%;
+  margin: -$sunRad;
+  //background-color: yellow;
+  background-image: url('http://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_HMIIF.jpg');
+  background-size:$sunRad*2;
+  background-repeat:no-repeat;
+}
+
+@each $planet in $planets {
+  $name: nth($planet, 1);
+  $orb: nth($planet,2);
+  $rad: nth($planet,3);
+  $prad: nth($planet,4);
+  $col: nth($planet,5);
+  
+  @include vp-anim($rad,$name);
+  
+    .#{$name} {
+      width: $prad * 2;
+      height: $prad*2;
+      border-radius:50%;
+      background-color:$col;
+      position: absolute;
+      top: $middle;
+      left: 50%;
+      margin: -$prad;
+      -webkit-animation: rot-#{$name} $orb infinite linear;
+      -moz-animation: rot-#{$name} $orb infinite linear;
+      animation: rot-#{$name} $orb infinite linear; 
+      z-index:200;
+    }
+  .#{$name}-path {
+        $orbitPath: $rad*2;
+        width: $orbitPath;
+        height: $orbitPath;
+        border-radius:50%;
+        z-index:100;
+        position:absolute;
+        top: $middle;
+        left:50%;
+        margin:-($orbitPath / 2);
+        border: solid 1px #444;
+      }
+}
+
+@include vp-anim(7px,lune);
+
+.lune {
+  width:2px;
+  height:2px;
+  background-color: #fff;
+  position:absolute;
+  $lunOrb: 2.7s * $baseUnit;
+  top: 50%;
+  left:50%;
+  margin:-1.5px;
+  -webkit-animation: rot-lune $lunOrb infinite linear;
+  -moz-animation: rot-lune $lunOrb infinite linear;
+  animation: rot-lune $lunOrb infinite linear;
+}
+
+.mar {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    #fff,
+    #fff 1px,
+    transparent 1px,
+    transparent 5px
+  );
+}
+
+@include vp-anim(7px,pho);
+@include vp-anim(9px,dem);
+
+.pho, .dem {
+  width:1px;
+  height:1px;
+  background-color: #fff;
+  position:absolute;
+  top: 50%;
+  left:50%;
+}
+
+.pho {
+  $phoOrb: 1.5s * $baseUnit;  // Should be 0.33s but spins like it's having a fit.
+  margin:-1px;
+  -webkit-animation: rot-pho $phoOrb infinite linear;
+  -moz-animation: rot-pho $phoOrb infinite linear;
+  animation: rot-pho $phoOrb infinite linear;
+}
+
+.dem {
+  $demOrb: 2s * $baseUnit;  // Should be 1.25s, spins too fast
+  margin:-1px;
+  -webkit-animation: rot-dem $demOrb infinite linear;
+  -moz-animation: rot-dem $demOrb infinite linear;
+  animation: rot-dem $demOrb infinite linear;
+}
+
+$jupR: 35px;
+.jove {
+  width:2px;
+  height:2px;
+  background-color: #fff;
+  position:absolute;
+  top: $jupR;
+  left:50%;
+}
+
+
+@include vp-anim($jupR + 4px,io);
+@include vp-anim($jupR + 6px,eur);
+@include vp-anim($jupR + 10px,gan);
+@include vp-anim($jupR + 18px,cal);
+
+.io {
+  $jioOrb: 2s*$baseUnit;
+  -webkit-animation: rot-io $jioOrb infinite linear;
+  -moz-animation: rot-io $jioOrb infinite linear;
+  animation: rot-io $jioOrb infinite linear;
+}
+
+.eur {
+  $jeurOrb: 3.5s*$baseUnit;
+  -webkit-animation: rot-eur $jeurOrb infinite linear;
+  -moz-animation: rot-eur $jeurOrb infinite linear;
+  animation: rot-eur $jeurOrb infinite linear;
+}
+
+.gan {
+  $jganOrb: 7s*$baseUnit;
+  -webkit-animation: rot-gan $jganOrb infinite linear;
+  -moz-animation: rot-gan $jganOrb infinite linear;
+  animation: rot-gan $jganOrb infinite linear;
+}
+
+.cal {
+  $jcalOrb: 16.5s*$baseUnit;
+  -webkit-animation: rot-cal $jcalOrb infinite linear;
+  -moz-animation: rot-cal $jcalOrb infinite linear;
+  animation: rot-cal $jcalOrb infinite linear;
+}
+
+.jup {
+  background-image: repeating-linear-gradient(
+    6deg,
+    #797663 22px,
+    #e1dcde 16px,
+    #c3a992 30px,
+    #e9ece2 30px
+  );
+}
+
+.spot {
+  position:absolute;
+  width:16px;height:12px;
+  border-radius: 8px / 6px;
+  top: $jupR+10;
+  left:50%;
+  background-color:#bc833b;
+  box-shadow: 0px 0px 5px #e1dcde;
+  border:solid 1px #e1dcde;
+  box-sizing:border-box;
+  -moz-box-sizing:border-box;
+  -webkit-box-sizing:border-box;
+  z-index:300;
+  .nep & {
+    background-color:darken(#343ec5, 10%);
+    border: 0;
+    box-shadow: none;
+    top: 50%;
+    left:45%;
+    width: 10px;
+    height: 6px;
+    margin: -2px;
+    border-radius: 5px / 3px;
+    border-left:solid 1px #7ed6fe;
+  }
+}
+
+$satD: 29px * 2;
+div[class$="-ring"] {
+  border-radius: 50%;
+  position:absolute;
+  top: 50%;
+  left:50%;
+  opacity: 0.7;
+  $tilt: 45deg;
+  -webkit-transform: rotatex($tilt);
+  -moz-transform: rotatex($tilt);
+  transform: rotatex($tilt);
+}
+
+.a-ring {
+  $ringD: $satD + 61;
+  $ringW: 5px;
+  border:solid $ringW #96866f;
+  width: $ringD;
+  height: $ringD;
+  margin: -($ringD / 2) - $ringW;
+}
+.b-ring {
+  $ringD: $satD + 46;
+  $ringW: 10px;
+  border:solid $ringW #554c3c;
+  width: $ringD;
+  height: $ringD;
+  margin: -($ringD / 2) - $ringW;
+}
+
+.c-ring {
+  $ringD: $satD + 37;
+  $ringW: 9px;
+  border:solid $ringW #574f4a;
+  width: $ringD;
+  height: $ringD;
+  margin: -($ringD / 2) - $ringW;
+}
+
+.f-ring {
+  $ringD: $satD + 75;
+  $ringW: 2px;
+  border:solid $ringW #908e8d;
+  width: $ringD;
+  height: $ringD;
+  margin: -($ringD / 2) - $ringW;
+}
+
+$uraD: 13px * 2;
+.e-ring {
+  $ringD: $uraD + 50;
+  $ringW: 7px;
+  border:solid $ringW #908e8d;
+  width: $ringD;
+  height: $ringD;
+  margin: -($ringD / 2) - $ringW;
+  $tilt: 0deg;
+  $axis: 89deg;
+  -webkit-transform: rotatex($tilt) rotatey($axis) !important;
+  -moz-transform: rotatex($tilt) rotatey($axis) !important;
+  transform: rotatex($tilt) rotatey($axis) !important;
+}
+
+.plu, .plu-path {
+  top: $middle + 287.4px;
+}
@@ -0,0 +1,15 @@
+# 🏃 Steps Sprite Animation
+
+Интерактивная демонстрация покадровой анимации с использованием CSS-свойства `animation-timing-function: steps()`. Этот метод позволяет оживить спрайт-листы, превращая их в плавную анимацию персонажа.
+
+### Особенности
+
+- **Sprite Sheets**: Использование одного изображения (спрайта) для создания многокадровой анимации.
+- **Steps Logic**: Применение функции `steps(10)`, которая разбивает движение фона на дискретные кадры, имитируя классическую мультипликацию.
+- **Interactive Control**: Возможность изменять скорость анимации и просматривать полную ленту спрайта с помощью встроенных контроллов (JS/jQuery).
+
+### Технологии
+
+- **HTML5 / CSS3**: Основная логика анимации и стилизация элементов интерфейса.
+- **jQuery**: Используется для управления скоростью (`animation-duration`) и переключения режимов отображения.
+- **WebKit Optimization**: Специальные стили для кастомизации ползунков (range input) и чекбоксов в браузерах на движке WebKit.
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Steps Animation</title>
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="animation">
+  <div id="frame"></div>
+  <div id="roll"></div>
+</div>
+
+<ul>
+  <li><label><input id="show" type="checkbox"> show sprite</label></li>
+  <li>
+    <div id="duration">
+      <label id="duration-label" class="isRight">1</label>
+      <input id="duration-input" type="range" min="0.2" value="1" max="4" step="0.1">
+    </div>
+    animation-duration
+  </li>
+</ul>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
@@ -0,0 +1,26 @@
+if ($.browser.webkit) {
+  $("html").addClass("WebKit");
+}
+
+$("#show").change(function () {
+  $("#animation").toggleClass("showRoll");
+});
+
+var labelSide = "right";
+
+$("#duration-input").change(function () {
+  var val = $(this).val();
+  var valRounded = Math.round(val * 10) / 10;
+  var mid = $(this).attr("max") / 2;
+  $("#frame").css("animation-duration", val + "s");
+  $("#roll").css("animation-duration", val + "s");
+  $("#duration-label").text(valRounded);
+
+  if (val > mid && labelSide == "right") {
+    labelSide = "left";
+    $("#duration-label").removeClass("isRight").addClass("isLeft");
+  } else if (val <= mid && labelSide == "left") {
+    labelSide = "right";
+    $("#duration-label").removeClass("isLeft").addClass("isRight");
+  }
+});
@@ -0,0 +1,226 @@
+/* -------------- Animation -------------- */
+
+#animation {
+  display: inline-block;
+  position: relative;
+  text-align: center;
+}
+
+
+
+/* -------------- Frame -------------- */
+
+.showRoll #frame {
+  border-color: hsl(0,0%,70%);
+}
+
+#frame {
+  width: 50px;
+  height: 72px;
+  border: 1px solid transparent;
+  background: url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
+  animation: frame-animation 1s steps(10) infinite;    
+}
+
+@keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
+
+
+
+/* -------------- Roll -------------- */
+
+.showRoll #roll {
+  opacity: .2;
+}
+
+#roll {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 500px;
+  height: 72px;
+  border: 1px solid hsl(0,0%,70%);
+  background: hsl(0,0%,100%) url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
+  transition: opacity .3s linear;
+  animation:  roll-animation 1s steps(10) infinite;
+}
+
+@keyframes roll-animation { 
+  0% { transform: translateX(0); } 
+  100% { transform:  translateX(-500px); } 
+}
+
+
+
+
+/* Global ------------------------------------------------------ */
+
+html {
+  height: 100%;
+  font:62.5%/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
+  background: #f0f0f0 url(../img/bg.png);
+}
+
+body {
+  display:         flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  padding: 50px;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  text-align: center;      
+}
+
+a {
+  text-decoration: none;
+  color: hsl(210,100%,60%);
+}
+
+a:hover {
+  color: hsl(210,100%,70%);
+}
+
+a:active {
+  color: hsl(210,100%,50%);
+}
+
+p {
+  font-size: 11px;
+  line-height: 1.5;
+  color: hsl(0,0%,60%);
+}
+
+.hl {
+  color: hsl(0,0%,20%);
+}
+
+ul {
+  margin: 40px 0;
+  list-style: none;
+  text-align: center;
+  font-size: 14px;
+  color: hsl(0,0%,60%);
+}
+.WebKit ul {
+  text-align: left;
+}
+
+li {
+  padding: 5px 0;
+}
+
+
+/* Show Sprite Checkbox ------------------------------------------------------ */
+
+.WebKit #show {
+  -webkit-appearance: none;
+  outline: none;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  margin: -2px 6px 0 0;
+  vertical-align: middle;
+  border: 10px solid hsl(0,0%,80%);
+  background: hsl(0,0%,40%);
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
+  -webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
+}
+
+.WebKit #show:checked:active,
+.WebKit #show:active {
+  border: 0px solid hsl(0,0%,80%);
+  -webkit-transition-duration: .1;
+}
+
+.WebKit #show:checked {
+  border: 5px solid hsl(0,0%,80%);
+  box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4), 0 1px 0 hsla(0,0%,100%,.6);
+}
+
+
+
+
+
+/* Animation Duration ------------------------------------------------------ */
+
+#duration {
+  display: inline-block;
+  position: relative;
+  margin: -4px 6px 0 0;
+}
+
+
+/* Label */
+
+#duration-label {
+  display: none;
+}
+
+.WebKit #duration-label {
+  position: absolute;
+  display: block;
+  z-index: 1;
+  top: 6px;
+  font-size: 11px;
+  color: hsl(0,0%,60%);
+  text-shadow: 0 1px 0 hsla(0,0%,100%,.3);
+  pointer-events: none;
+  -webkit-transition: -webkit-transform .2s cubic-bezier(.26, .08, .15, 1), 
+    color .6s .2s ease-out;
+}
+
+.WebKit #duration-label.isRight {
+  right: 50%;
+  margin-right: -20px;
+  left: auto;
+  -webkit-transform: translate3d(20px,0,0);
+}
+.WebKit #duration-label.isLeft {
+  right: auto;
+  margin-left: -20px;
+  left: 50%;
+  -webkit-transform: translate3d(-20px,0,0);
+}
+
+.WebKit #duration:active #duration-label {
+  color: hsl(0,0%,30%);
+  -webkit-transition-delay: 0;
+}
+
+
+/* Input */
+
+.WebKit #duration-input {
+  -webkit-appearance: none;
+  position: relative;
+  vertical-align: middle;
+  width: 100px;
+  border-radius: 20px;
+  background: hsl(0,0%,80%);
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
+  overflow: hidden;
+  outline: none;
+}
+
+.WebKit #duration-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  border: 5px solid hsl(0,0%,80%);
+  background: hsl(0,0%,40%);
+  box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4);
+  -webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
+}
+
+.WebKit #duration-input:active::-webkit-slider-thumb {
+  border: 0px solid hsl(0,0%,80%);
+  -webkit-transition-duration: .1;
+}