css boxRotate

A Rotating Box
An exciting Journey into Thai Culture
For my students. It will be explained in class
Note that adding a page height will stop the page from expanding with the animation. (it has not been added on this page but the code is there in the section style)

HTML

<section style="height: 450px;"><div id="anim_box">
An exciting Journey into Thai Culture
</div></section>

CSS

/*---------start-------------------- animated box----------------------------*/
#anim_box {
              width: 100px;
              height: 100px;
              color: white;
              margin: 20px;
              text-align: center;
              border: 1px solid black;
              padding: 15px;
              font-size: 24px;
-webkit-animation: demo 18s infinite ease;
              animation: demo 4s infinite ease linear;
              position: relative;

}
@-webkit-keyframes demo {
0% {
              left: 0%;
              background: blue;
              border-radius: 5px;
              font-size: 6px;
}
20% {
              left: 5%;
              background: blue;
              border-radius: 45px;
              font-size: 6px;
}
30% {
              background: green;
              border-radius: 120px;
              font-size: 20px;
              width: 200px;
              text-shadow: 2px 2px 0px black;
}
40% {
              left: 210px;
              background: blue;
              border-radius: 5px;
              width: 350px;
              font-size: 36px;
              box-shadow: inset 0px 0px 50px yellow,  0px 0px 1px black;
              text-shadow: 1px 1px 2px black;
              transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
              left: 210px;
              background: blue;
              border-radius: 5px;
              width: 350px;
              font-size: 36px;
              text-shadow: 4px 4px 4px black;
              box-shadow: 9px 9px 15px black;
              transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
/*---------end-------------------- animated box----------------------------*/