Android : Is it possible to create a video or a GIF from an animation made with HTML and CSS code?

Hello wizards of the Internet!

I am currently developing an Application for iOS, Android and Windows Phone using PhoneGap build. The question I have right now is quite straightforward: Is it possible to create a video (MP4, AVI etc.) or a .GIF file from an animation made with HTML and CSS?

If the answer is yes, then is it done with a plug-in, extern module/server or with pure code?

I made a small animation to make this more understandable. Might not work as intended when using Firefox.

http://jsfiddle.net/0n2j9dbe/

HTML

<!-- ======= Animation page ========  -->

<div data-role="page" id="page">
    <div data-role="header">
        <h1>The animation page</h1>
    </div>

    <div data-role="content" id="Welcome">
        <h2> Welcome! </h2>
    </div>

    <!-- The Cube STARTS -->   
    <div id="container">

        <div id="position">  
            <div id="The_cube" class="animate">
                <div></div>
                <div></div>
                <div></div>
                <div></div>              
            </div>
        </div>
    </div>
    <!-- The Cube ENDS -->
</div>

CSS

/* ======= Body ======== */

#page {
    background-color: #fff;
    height: 650px;
}

#Welcome {
    width:      70%;
    color:      #203CFF;
    margin:     auto;
    text-align: center;
    border-radius:      0 0 5px 5px;
    background-color:   #F2F0FF;
}

#Startbtn {
    border-radius: 20px 20px 20px 20px;
}


/* ======= @ - attributes ======== */

/* Cube spinning START */
/* Makes the actual cube start to rotating */
@-moz-keyframes spinnspinn {
  from  {-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);  }
  to    {-moz-transform: rotateX(150deg) rotateY(134deg) rotateZ(180deg);  }  }

@-webkit-keyframes spinnspinn {
  from  {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);  }
  to    {-webkit-transform: rotateX(150deg) rotateY(134deg) rotateZ(180deg);  }  }

@-o-keyframes spinnspinn {
  from  {-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);  }
  to    {-o-transform: rotateX(150deg) rotateY(134deg) rotateZ(180deg);  }  }

@-ms-keyframes spinnspinn {
  from  {-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);  }
  to    {-ms-transform: rotateX(150deg) rotateY(134deg) rotateZ(180deg);  }  }

@keyframes spinnspinn {
  from  {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);  }
  to    {transform: rotateX(150deg) rotateY(134deg) rotateZ(180deg);  }  }
/* Cube spinning END */


/* ======= Content of the cube ======== */

#position {
  position: relative;
  margin: 0 auto;
  -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;

  -webkit-transform : translateY(90px);
  -moz-transform    : translateY(90px);
  -o-transform      : translateY(90px);
  -ms-transform     : translateY(90px);
  transform         : translateY(90px);
}

#container {
  -webkit-perspective : 1000px;
  -moz-perspective    : 1000px;
  -o-perspective      : 1000px;
  -ms-perspective     : 1000px;
  perspective         : 1000px;

  -webkit-perspective-origin  : 50% 50%;
  -moz-perspective-origin     : 50% 50%;
  -moz-transform-origin       : 50% 50%;
  -o-perspective-origin       : 50% 50%;
  -ms-perspective-origin      : 50% 50%;
  perspective-origin          : 50% 50%;
}

.animate {
  -webkit-animation : spinnspinn 5s 1 linear;
  -moz-animation    : spinnspinn 5s 1 linear;
  -o-animation      : spinnspinn 5s 1 linear;
  -ms-animation     : spinnspinn 5s 1 linear;
  animation         : spinnspinn 5s 1 linear;

  -webkit-transform : rotateX(150deg) rotateY(134deg) rotateZ(180deg);
  -moz-transform    : rotateX(150deg) rotateY(134deg) rotateZ(180deg);
  -o-transform      : rotateX(150deg) rotateY(134deg) rotateZ(180deg);
  -ms-transform     : rotateX(150deg) rotateY(134deg) rotateZ(180deg);
  transform         : rotateX(150deg) rotateY(134deg) rotateZ(180deg);
}

#The_cube {
  position: relative;
  margin:   0 auto;
  height:   200px;
  width:    200px;
  -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;

  -webkit-transition  : -webkit-transform 2s linear;
  -moz-transition     : -moz-transform 2s linear;
  -o-transition       : -o-transform 2s linear;
  -ms-transition      : -ms-transform 2s linear;
  transition          : transform 2s linear;
}

#The_cube>div {
  position: absolute;
  height:   160px;
  width:    160px;
  padding:  20px;
  opacity:  0.9;
  background-position:center center;
}


/* ======= Placement of each side ======== */

#The_cube div:nth-child(1) {
  -webkit-transform : translateZ(100px);
  -moz-transform    : translateZ(100px);
  -o-transform      : translateZ(100px);
  -ms-transform     : translateZ(100px);
  transform         : translateZ(100px);
  background-color  : #8FB9F8;
}

#The_cube div:nth-child(2) {
  -webkit-transform : rotateY(90deg) translateZ(100px);
  -moz-transform    : rotateY(90deg) translateZ(100px);
  -o-transform      : rotateY(90deg) translateZ(100px);
  -ms-transform     : rotateY(90deg) translateZ(100px);
  transform         : rotateY(90deg) translateZ(100px);
  background-color  : #8189F8;
}

#The_cube div:nth-child(3) {
  -webkit-transform : rotateY(180deg) translateZ(100px);
  -moz-transform    : rotateY(180deg) translateZ(100px);
  -o-transform      : rotateY(180deg) translateZ(100px);
  -ms-transform     : rotateY(180deg) translateZ(100px);
  transform         : rotateY(180deg) translateZ(100px);
  background-color  : #ABD9FA;
}

#The_cube div:nth-child(4) {
  -webkit-transform : rotateY(-90deg) translateZ(100px);
  -moz-transform    : rotateY(-90deg) translateZ(100px);
  -o-transform      : rotateY(-90deg) translateZ(100px);
  -ms-transform     : rotateY(-90deg) translateZ(100px);
  transform         : rotateY(-90deg) translateZ(100px);
  background-color  : #9B79F7;
}

Is it possible to make this into a video or GIF?

Thanks in advance!