Часовое вращение с анимационными ключевыми кадрами

Question

Я нарисовал 8 точек в круге. Я хочу повернуть круг, но резко, как часы, не плавно. За каждые 12,5% времени, необходимого для полного вращения, я хочу увеличить угол поворота на 45 градусов.

Я определил мои анимации, как это:

@-webkit-keyframes clock { 

    0% { 
    transform: rotate(0deg); 
    } 
    12.4% { 
    transform: rotate(0deg); 
    } 
    12.5%{ 
    transform: rotate(45deg); 
    } 
    24.9% { 
    transform: rotate(45deg); 
    } 
    25%{ 
    transform: rotate(90deg); 
    } 
    ... 

Моей грубую попытку устранения промежуточного ключевые кадров, определяя процент очень близко друг к другу не совсем проходит перекличку. Я получаю случайную изменчивость, которую, как я предполагаю, вызвана некоторой проблемой округления.

Обратите внимание: у меня есть другие способы достижения анимации, которой я пользуюсь, я специально спрашиваю, можем ли мы применить резкие эффекты в анимации ключевого кадра CSS.

исх: http://codepen.io/chardie/pen/embLrP

Answer 1

Просто измените timing function для анимации, чтобы быть steps(1) вместо linear. Это предотвращает плавный переход между состояниями, которые вы хотите избежать:

http://codepen.io/anon/pen/raoQGm

#loading{ 
    -webkit-animation: 3s clock infinite steps(1); 
} 
@-webkit-keyframes clock { 
    0% { 
     transform: rotate(0deg); 
    } 
    12.5%{ 
     transform: rotate(45deg); 
    } 
    25%{ 
     transform: rotate(90deg); 
    } 
    ... 
}