Archiv-Modus von Basti1012 Lösungspage

Hi 2 all. Stehe ich auf dem Schlauch oder ist es nicht möglich die aktuelle Position zu ermitteln bei einem durch CSS animierten Objektes.

Code

                                    
                                <script src="/js_webseite/jquery.js"></script>
<style>
  #info{
  width:25vw;
  height:100px;
  margin:0 auto;
 margin-top:200px;
  border:1px solid red;
}


#hg{
    height:100px;
  width:100px;
    position:absolute;
    top:0px;
    left:0px;
    animation:los 7s linear infinite;
}
  @keyframes los{
    0%,100%{
      position:absolute;
      left:2px;
      top:0px;
    }
    25%{
      position:absolute;
      top:2px;
      left:calc(100% - 100px);
    }
    50%{
      position:absolute;
      top:calc(100% - 100px);
      left:calc(100% - 102px);
    }
    75%{
      position:absolute;
      left:0;
      top:calc(100% - 102px);
    }
  }
</style>
<body>
  <div id="info"></div>
<img id='hg' src="/image/kermit_.jpg">
  <script>
    setInterval(function(){
  ff=$('#hg').position();
  l=ff.left;
  t=ff.top;
  $('#info').html('Top = '+t.toFixed(2)+' Px<br>Left = '+l.toFixed(2)+' Px');
},100)
  </script>
</body>

basti1012.bplaced.net

[gelöst] mit css animiertes objekt lokalisieren

Code