Можно ли keyframe-css анимировать div против часовой стрелки над pi?

вопрос:

можно ли оживить внутренний круг .watch-face от 12 часов, против часовой стрелки, полного вращения или 2nr только в ключевых кадрах css?

здесь будет выглядеть завершенная анимация: enter image description here

ЗАВЕРШЕННАЯ АНИМАЦИЯ:

completed animation

Проверьте исходный код Live:код образец

HTML-код:

<div class="watch-container">
  <div class="watch-face"></div>
</div>

SCSS

$watch-face-size: 165;
$watch-border-size: 185;

.watch-face {
  height: $watch-face-size + px;
  width: $watch-face-size + px;
  background: green;
  box-sizing: border-box;
  border-radius: $watch-face-size + px;
  position: relative;
  display: inline-block;

  &.animate-counter-clockwise {
    //How to write a keyframe animation to animate from
  }


  &::after {
    content: "10";
    position: absolute;
    font-size: 68px;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-weight: 400;
    letter-spacing: -3px;

  }

  &::before {
    position: absolute;
    content: " ";
    border: 5px solid green;
    background: transparent;
    border-radius: $watch-border-size + px;
    width: $watch-border-size + px;
    height: $watch-border-size + px;
    top: -10px;
    left: -10px;
  }
}

//boilerplate styles
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    -ms-box-sizing: inherit;
    -o-box-sizing: inherit;
    box-sizing: inherit;
}

.watch-container {
  width: 30%;
  margin: 50px auto;
  line-height: 22px;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
6
css css-animations css3 html keyframe

2 ответов

Я бы использовал SVG для этой анимации, см. решение codepen:

<div class="watch-container">
  <div class="watch-face">
    <svg class="animator">
      <circle cx="50%" cy="50%" r="100" />
    </svg>
  </div>
</div>

таким образом, вы можете анимировать круг с помощью простого:

@-webkit-keyframes clock-animation {
  0% { stroke-dashoffset: 0; }
  33% { stroke-dashoffset: 628; }
  100% { stroke-dashoffset: 628; }
}

.animator {
  height: 100%;
  width: 100%;

  circle {
    animation: clock-animation 3s linear infinite;
    fill: transparent;
    stroke: white;
    stroke-dasharray: 628;
    stroke-dashoffset: 0;
    stroke-width: 200px;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
}

краткое описание: вам нужно создать SVG с элементом внутри круга. Элемент circle имеет границу (штрих), которая фактически заполняет весь размер круга. Затем вам нужно определить внешний вид Штриха с помощью stroke-dasharray который устанавливает ширину одной черточки хода (100% в нашем случае) и манипулирует этим одиночным большим тире с stroke-dashoffset. Смещение перемещает тире, и оно немного выходит из круга.

Я выбрал цифры вручную с помощью простой консоли guessing / chrome, но они довольно вычисляемы с обычными правилами геометрии школы, и SASS помогает здесь много.

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

вдохновленный этот удивительный прогресс-бар реализации

3

Я не знаю, как вы анимируете свою текущую разметку. Насколько я знаю, анимация div радиально, как это невозможно. Однако вы можете подделать его, вращая квадраты и добавляя некоторое покрытие. Вот демо:

http://codepen.io/apexskier/pen/wGovRy

<div class="watch-face animating">
  <div class="cover"></div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
</div>

a, b, c и d представляют четыре квадранта ваших часов, каждый из которых будет повернут вокруг середины и показан и скрыт по мере необходимости. cover is используется, чтобы скрыть первый, как это постепенно показано.

Я z-index правильно слой вещи.

вот некоторые из важных css (см. codepen для всего)

EDIT: фиксированные границы вокруг квадранта, сделав все это четной шириной

.watch-face {
  .a, .b, .c, .d, .cover {
    position: absolute;
height: ($watch-face-size / 2);
width: ($watch-face-size / 2);
    background-color: green;
    z-index: 5;
    transform-origin: bottom right;
    border-top-left-radius: ($watch-face-size / 2) - 1;
    border-top: 1px solid #fff; // hides a nasty green aliasing line
    border-left: 1px solid #fff; // hides a nasty green aliasing line
  }
  .cover {
    opacity: 0;
  }

  &.animating, &.animate {
    .a, .b, .c, .d, .cover {
      animation-duration: 4s;
      animation-timing-function: linear;
    }
  }

  &.animating {
    .a, .b, .c, .d, .cover {
      animation-iteration-count: infinite;
    }
  }

  &.animate {
    .a, .b, .c, .d, .cover {
      animation-iteration-count: 1;
    }
  }

  .a {
    animation-name: clock-a;
    opacity: 1;
    transform: rotate(90deg);
  }
  .b {
    animation-name: clock-b;
    transform: rotate(180deg);
  }
  .c {
    animation-name: clock-c;
    transform: rotate(270deg);
  }
  .d {
    animation-name: clock-d;
    transform: rotate(360deg);
  }
  .cover {
    animation-name: clock-cover;
    z-index: 10;
    background-color: #fff;
  }
}

@keyframes clock-cover {
  0% {
    opacity: 1;
  }
  74.9999999% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes clock-a {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes clock-b {
  0% {
    transform: rotate(90deg);
    opacity: 0;
  }
  24.999999% {
    opacity: 0;
  }
  25% {
    transform: rotate(90deg);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
    opacity: 1;
  }
}

@keyframes clock-c {
  0% {
    transform: rotate(180deg);
    opacity: 0;
  }
  49.999999% {
    opacity: 0;
  }
  50% {
    transform: rotate(180deg);
    opacity: 1;
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(270deg);
    opacity: 1;
  }
}

@keyframes clock-d {
  0% {
    transform: rotate(270deg);
    opacity: 0;
  }
  74.999999% {
    opacity: 0;
  }
  75% {
    transform: rotate(270deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}
3