Continue CSS animation on page load?

问题

I want my CSS animations for the elements in my header.php to continue smoothly on different pages.

So if I had a 200 second looped animation and 80 seconds in I clicked on the about us page the animation would still be 80 seconds in on page load?

Is this even possible and if so, how? Thanks.

回答1:

You can do it if it's some sort of keyframes animation like:

CSS

 @keyframes colorchange {
    0% {background: red;}
    50% {background: green;}
    100% {background: yellow;}
 }
 div {
     width: 100px;
     height: 100px;
     background: red;
     -webkit-animation: colorchange 5s linear infinite; 
     animation: colorchange 5s linear infinite;
     -moz-animation: colorchange 5s linear infinite;
 }

  $(document).ready(function(){
     var animationTime=0;
     var intId = setInterval(function(){
         animationTime++;
     },1000);
     var postTime = function(link){
      $.ajax({
         type: 'POST',
         url: link,
         data: {'variable': animationTime},
        });
     }
     $('a').click(function(){
           window.onbeforeunload = postTime($(this).attr('href'));
     })
  })

PHP

   $myval = $_POST['variable'];
   echo "$('div').css('animation-delay', '-".$myval."s')"

You can use negative animation delay to start animation from some point, but in any way, this method is not perfect, but worth a try.

P.S But better use AJAX for page reload in such cases :)

回答2:

Quick rough thought

time = 200000;
var distance = 300;
window.currentTime = 0;

$('#element').animate({ left: distance },
{
  duration: time,
  step: function(now, fx) {

    window.currentTime = Math.round((now*time)/distance);

  }
});

$('a').on("click", function(e){
    e.preventDefault();
    window.location.href = "http://yoururl.com/?startingPoint=" + (time - window.currentTime);        
});

then in each file do something like

if($_GET['startingPoint']){
    echo 'time = '.$_GET['startingPoint'];
}
else{
    echo 'time = 200000';
}

in place of the javascript time variable, i apologize if theres bugs in this, literally just pulled this out of my butt, but the concept is there, and no ajax needed.

来源：https://stackoverflow.com/questions/26610739/continue-css-animation-on-page-load

标签

php

jquery

html

css