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

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 来重新加载页面 :)