在页面加载时继续CSS动画?

时间:2014-10-28 14:21:37

标签: php jquery html css

我希望我的header.php中的元素的CSS动画能够在不同的页面上顺利继续。

所以如果我有一个200秒的循环动画和80秒,我点击了关于我们的页面,动画在页面加载时仍然是80秒?

这是否可能,如果是这样,怎么样?感谢。

2 个答案:

答案 0 :(得分:1)

如果它是某种类型的关键帧动画,你可以这样做:

<强> 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;
 }

<强> JS

  $(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')"

您可以使用负动画延迟从某个点开始动画,但无论如何,这种方法并不完美,但值得一试。

P.S 但在这种情况下最好使用AJAX进行页面重新加载:)

答案 1 :(得分:1)

快速粗略思考

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);        
});

然后在每个文件中执行类似

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

代替javascript时间变量,我很抱歉,如果这里有错误,只是把它从我的屁股中拉出来,但概念就在那里,并且不需要ajax。