Question

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

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

这是否可能，如果是这样，怎么样？感谢。

Answer 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进行页面重新加载：）

Answer 2

快速粗略思考

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。

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

2 个答案: