Set the moment of an animation-duration

Question

I want to implement a timer, but it should display the current minutes seconds.

So I found that one codepen.io/ninjascribble/pen/rHwkK

How can I make it possible that the animation starts at a specific time?

Answer 1

There is a "startDate" value in the JS-Part of the Codepen. By default it is set to new Date();

Just set your date here and you'll be good to go:

var defaults = {}
  , one_second = 1000
  , one_minute = one_second * 60
  , one_hour = one_minute * 60
  , one_day = one_hour * 24
  , startDate = INSERT_YOUR_DATE_HERE
  , face = document.getElementById('lazy');

This will set the time right (but only the timer). To make the circles go the correct way it's a little bit more difficult but still achievable.

First of all you have to understand that the two oter circles are made with css keyframe animations. Meaning that currently, our javascript has no effect to them. They're just pre-programmed to run every 60 / 3600 seconds.

@keyframes spin1 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

As you probably already know Stack Overflow is no code-writing service, but I'll still give you a lead:

1. Calculate how far each circle has to be (in JavaScript). For example: if your start time is 10 seconds you should be 16.666% into the animation (of the minute circle).
2. Set the keyframes percentage to make the circle start at the right position. As there is no way to manipulate the keyframes percentage from javascript, I'd suggest following this StackOverflow post: https://stackoverflow.com/a/29514053/8750569

I hope this helps you. Show some of your attempts if you're stuck somewhere and I'd be glad to help you more :)