I use a css animation to represent the sun cycle for a day (from 6AM to 6PM). Unfortunatly, I want also to be able to set the current percentage depending on the time of the day (for example, if the current time is 12AM, I want to put the sun at 50% of the animation.

Here is my jsfiddle : /

and Here is my code :

/* Chrome, Safari, Opera */

@-webkit-keyframes sunAnimation {
  0% {
    left: -100px;
    top: 30%;
  }
  25% {
    left: calc(25% - 25px);
    top: 20%;
  }
  50% {
    left: calc(50% - 40px);
    top: 10%;
  }
  75% {
    left: calc(75% + 25px);
    top: 20%;
  }
  100% {
    left: calc(100% + 100px);
    top: 30%;
  }
}
@keyframes sunAnimation {
  0% {
    left: -100px;
    top: 30%;
  }
  25% {
    left: calc(25% - 25px);
    top: 20%;
  }
  50% {
    left: calc(50% - 40px);
    top: 10%;
  }
  75% {
    left: calc(75% + 25px);
    top: 20%;
  }
  100% {
    left: calc(100% + 100px);
    top: 30%;
  }
}
.sun {
  width: 100px;
  height: 100px;
  position: absolute;
  animation-name: sunAnimation;
  animation-duration: 60s;
  animation-timing-function: linear;
  -webkit-animation-name: sunAnimation;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 60s;
  /* Chrome, Safari, Opera */
  -webkit-animation-timing-function: linear;
  /* Chrome, Safari, Opera */
}

How can I simply set the current percentage of a css3 animation ? If it's very plex to do it, does a library exist for that ?

Thanks for your help.

It's not a duplicate because the needs are different.

I use a css animation to represent the sun cycle for a day (from 6AM to 6PM). Unfortunatly, I want also to be able to set the current percentage depending on the time of the day (for example, if the current time is 12AM, I want to put the sun at 50% of the animation.

Here is my jsfiddle : http://jsfiddle/vyhjt6mu/3/

and Here is my code :

/* Chrome, Safari, Opera */

@-webkit-keyframes sunAnimation {
  0% {
    left: -100px;
    top: 30%;
  }
  25% {
    left: calc(25% - 25px);
    top: 20%;
  }
  50% {
    left: calc(50% - 40px);
    top: 10%;
  }
  75% {
    left: calc(75% + 25px);
    top: 20%;
  }
  100% {
    left: calc(100% + 100px);
    top: 30%;
  }
}
@keyframes sunAnimation {
  0% {
    left: -100px;
    top: 30%;
  }
  25% {
    left: calc(25% - 25px);
    top: 20%;
  }
  50% {
    left: calc(50% - 40px);
    top: 10%;
  }
  75% {
    left: calc(75% + 25px);
    top: 20%;
  }
  100% {
    left: calc(100% + 100px);
    top: 30%;
  }
}
.sun {
  width: 100px;
  height: 100px;
  position: absolute;
  animation-name: sunAnimation;
  animation-duration: 60s;
  animation-timing-function: linear;
  -webkit-animation-name: sunAnimation;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 60s;
  /* Chrome, Safari, Opera */
  -webkit-animation-timing-function: linear;
  /* Chrome, Safari, Opera */
}

How can I simply set the current percentage of a css3 animation ? If it's very plex to do it, does a library exist for that ?

Thanks for your help.

It's not a duplicate because the needs are different.

• javascript
• css
• animation

• 1 possible duplicate of Get/set current @keyframes percentage/change keyframes – OddDev Commented Apr 8, 2015 at 11:51
• Not a plete answer, but you might be able to find this helpful: jsfiddle/jbutler483/tgbcd9f2 . It moves the image by a certain percentage, depending on the hour. – jbutler483 Commented Apr 8, 2015 at 11:52
• If I may positively criticise, this animation could also be written as transforms which CSS is a much better at It would be smoother (you can see the steps it is taking now) and a lot less of a resource drain. greensock./css-performance – Shikkediel Commented Apr 8, 2015 at 11:59
• OddDev : the needs are different. Not a duplicate. jbutler483 : thanks but it can be difficult in my case because I have 4 distinct steps. Shikkediel : interesting I will see that, thanks. – I_Am_Rototo Commented Apr 8, 2015 at 12:25

2 Answers 2

To answer your actual question: Yes, you can use a bination of CSS-vars and JS for this.

$(function () {

	$(window).mousemove(function (e) {
  	var t =  (-1/$(window).width()*e.pageX);
  	document.documentElement.style.setProperty('--delay', t+'s');
  });
});

:root {
    --delay: 0;
}

.box {
  width: 20px;
  height: 20px;
  background-color: #ff6600;
  animation: move 1s;
  animation-play-state: paused;
  animation-delay: var(--delay);
}

@keyframes move {
  100% { 
    transform: translate(200px, 100px) scale(2) rotate(180deg);
  }
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
</div>

You can specify a negative animation-delay property.

Example: http://jsfiddle/vyhjt6mu/4/

In that example I've set animation-delay: -30s so the animation will start from the middle point

For this task you could set 24 different classes in CSS (one for each hour) like so

.h00 {
  animation-delay: 0s; 
  -webkit-animation-delay: 0s; 
}

.h01 {
  animation-delay: -2.5s; 
  -webkit-animation-delay: -2.5s; 
}

.h02 {
  animation-delay: -5s; 
  -webkit-animation-delay: -5s; 
}

...

.h22 {
  animation-delay: -55s; 
  -webkit-animation-delay: -55s; 
}

.h23 {
  animation-delay: -57.5s; 
  -webkit-animation-delay: -57.5s; 
}

where the difference of delay between each hour is 2.5 seconds (60s/24); then, via JS, get the current hour via getHours() method and apply the right class name to your element