I want to make a html element animation a javascript variable so i can add physics to it

Question

So here is some simple physicsjs and I have a css animation that is called by divs in my index file. So the main goal of this project is to have the walls come in and bounce the ball around also the walls cant collide with any other walls or it will freak out. this is the index http://www.fast-files.com/getfile.aspx?file=162310

require([
    full
  ],

  function(Physics) {
    Physics(function(world) {

      // bounds of the window
      var viewportBounds = Physics.aabb(0, 0, window.innerWidth, window.innerHeight),
        edgeBounce, renderer;

      // create a renderer
      renderer = Physics.renderer('canvas', {
        el: 'viewport'
      });

      // add the renderer
      world.add(renderer);
      // render on each step
      world.on('step', function() {
        world.render();
      });

      // constrain objects to these bounds
      edgeBounce = Physics.behavior('edge-collision-detection', {
        aabb: viewportBounds,
        restitution: 0.99,
        cof: 0.8
      });

      // resize events
      window.addEventListener('resize', function() {

        // as of 0.7.0 the renderer will auto resize... so we just take the values from the renderer
        viewportBounds = Physics.aabb(0, 0, renderer.width, renderer.height);
        // update the boundaries
        edgeBounce.setAABB(viewportBounds);

      }, true);

      var viewWidth = window.innerWidth,
        viewHeight = window.innerHeight,
        viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight),
        edgeBounce, renderer;

      var hsquare = [];
      for (var i = 0, l = 1; i < l; ++i) {
        Physics.noConflict = function() {

          if (window.Physics === Physics) {
            window.Physics = _Physics;
          }

          return Physics;
        };
        hsquare.push(Physics.body('rectangle', {
          width: 1920,
          height: 100,
          x: 0 + viewWidth - 0,
          y: 0 + viewHeight - 50,
          vx: 0,
          cof: 10000000,
          restitution: 0,
          label: 'box',
          styles: {

            width: 40,
            height: 40
          }
        }));
      }
      var vsquare = [];
      for (var i = 0, l = 1; i < l; ++i) {

        vsquare.push(Physics.body('rectangle', {
          width: 100,
          height: 975,
          x: 0 + viewWidth - 50,
          y: 0 + viewHeight - 0,
          vx: 0,
          cof: 10000000,
          restitution: 0,
          label: 'box',
          styles: {

            width: 40,
            height: 40
          }
        }));

      }



      function leftArrowPressed() {
        world.add(vsquare)

      }

      function rightArrowPressed() {
        world.add(hsquare)

      }

      document.onkeydown = function(evt) {
        evt = evt || window.event;
        switch (evt.keyCode) {
          case 37:
            leftArrowPressed();
            break;
          case 39:
            rightArrowPressed();
            break;
        }
      };

      var attractor = Physics.behavior('attractor', {
        order: 0,
        strength: 0.002
      });
      world.on({
        'interact:poke': function(pos) {
          world.wakeUpAll();
          attractor.position(pos);
          world.add(attractor);
        },
        'interact:move': function(pos) {
          attractor.position(pos);
        },
        'interact:release': function() {
          world.wakeUpAll();
          world.remove(attractor);
        }
      });


      world.add([
        Physics.behavior('interactive', {
          el: renderer.container
        }), Physics.behavior('constant-acceleration'), Physics.behavior('body-impulse-response'), edgeBounce
      ]);
      world.add([
        Physics.behavior('constant-acceleration'), Physics.behavior('body-collision-detection'), Physics.behavior('sweep-prune'), edgeBounce
      ]);

      world.add(Physics.body('circle', {
        x: renderer.width * 0.5,
        y: renderer.height * 0.5,
        vx: 0,
        radius: 40,
        styles: {

        }
      }));

      Physics.util.ticker.on(function(time) {
        world.step(time);

      });
    });
  });

<!-- begin snippet: js hide: false console: true babel: false -->

    <!DOCTYPE html>
<html>
<head>
<style>
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
.right {
    z-index: 1;
    position:absolute;
      right: 0px;
    width: 100px;
    height: 1200px;
    background-color: black;
    animation-name: right;
    animation-duration: 1s;
}



@keyframes right {
    0%   {right:0px;}
    25%  {right:400px;}
    50%  {right:0px;}
}
.left {
    z-index: 1;
    position:absolute;
      left: 0px;
    width: 100px;
    height: 1200px;
    background-color: black;
    animation-name: left;
    animation-duration: 1s;
}



@keyframes left {
    0%   {left:0px;}
    25%  {left:400px;}
    50%  {left:0px;}
}
.up {
    z-index: 1;
    position:absolute;
      top: 0px;
    width: 1900px;
    height: 100px;
    background-color: black;
    animation-name: up;
    animation-duration: 1s;
}



@keyframes up {
    0%   {top:0px;}
    25%  {top:400px;}
    50%  {top:0px;}
}
.down {
    z-index: 1;
    position:absolute;
      bottom: 0px;
    width: 1900px;
    height: 100px;
    background-color: black;
    animation-name: down;
    animation-duration: 1s;
}



@keyframes down {
    0%   {bottom:0px;}
    25%  {bottom:400px;}
    50%  {bottom:0px;}
}
html, body, #viewport { margin: 0; z-index: 1; background: #ffffff; height: 100%; } .pjs-meta { color: #fff; } canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }</style>
<script data-main="scripts/config.js" src="scripts/require.js"></script>
</head>
 <body>
<canvas id="viewport" width="1082" height="974"></canvas>

</script>
</body>
 </html>

So here you have the inward animation for all 4 sides, what I want to do with these divs is convert them to physicsjs and add physics to the animation.