freetype2/tests/html/source/styles/top.css

/* Font for the whole document */
* {
  font-family: "Courier New", Courier, monospace;
}
/* Sprite image in the table */
#sprite { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
    width: 100%;
    height: auto;
}
/* Table style for the list view */
table {
  border-collapse: collapse;
  border: none;
  position: relative;
  width: 100%;
}
th,
td {
  border: 1px solid black;
  padding: 4px 16px;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  text-align: left;
}
th {
  background-color: #C8C8C8;
  cursor: pointer;
}
/* Image column in a row */
#image_row{
  width: 50%;
  height: auto;
}
/* Go to top button */
#myBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  background-color: #555;
  color: white;
}

/* Top Page styling begins */
#frame_1{
  width:49%;
  height:500px;
  align-self: right;
}
#frame_2{
  width:49%;
  height:500px;
  align-self: left;
}
/* Animation select buttons*/
#select_animation{
  margin-left: 50%;
}
.select {
  font-size: 16px;
  text-align: left;
}
/* Pause/Play Button */
#pause_btn{
  float: right;
}
/* Animation div on the right iframe */
.animation {
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;

  margin: auto;
  display: block;
  background: url("");
  background-repeat: no-repeat;
  background-size: cover;
  /* Nominal Width on load */
  width: 120px;
  height: 130px;
}
/*Animations*/
/* Transition between 1st and the 2nd sub-image */
.one_two {
    -webkit-animation: one_two 2s steps(2) infinite;
       -moz-animation: one_two 2s steps(2) infinite;
        -ms-animation: one_two 2s steps(2) infinite;
         -o-animation: one_two 2s steps(2) infinite;
            animation: one_two 2s steps(2) infinite;
}
/* Transition between 1st and the 2nd sub-image */
.one_three {
    -webkit-animation: one_three 2s steps(2) infinite;
       -moz-animation: one_three 2s steps(2) infinite;
        -ms-animation: one_three 2s steps(2) infinite;
         -o-animation: one_three 2s steps(2) infinite;
            animation: one_three 2s steps(2) infinite;
}
/* Transition between 1st and the 2nd sub-image */
.one_four {
    -webkit-animation: one_four 2s steps(2) infinite;
       -moz-animation: one_four 2s steps(2) infinite;
        -ms-animation: one_four 2s steps(2) infinite;
         -o-animation: one_four 2s steps(2) infinite;
            animation: one_four 2s steps(2) infinite;
}
/* Pause/Play the animation */
.pause {
  animation-play-state: paused;
  -o-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
@-webkit-keyframes one_two {
   from { background-position:      0px; }
     to { background-position:   66.66%; } /* Goes to 2nd sub-image */
}
@-webkit-keyframes one_three {
   from { background-position:      0px; }
     to { background-position:  133.33%; } /* Goes to 3rd sub-image */
}
@-webkit-keyframes one_four {
   from { background-position:      0px; }
     to { background-position:     200%; } /* Goes to 4rd sub-image */
}

@-moz-keyframes one_two {
   from { background-position:      0px; }
     to { background-position:   66.66%; }
}
@-moz-keyframes one_three {
   from { background-position:      0px; }
     to { background-position:  133.33%; }
}@-moz-keyframes one_four {
   from { background-position:      0px; }
     to { background-position:     200%; }
}

@-ms-keyframes one_two {
   from { background-position:      0px; }
     to { background-position:   66.66%; }
}
@-ms-keyframes one_three {
   from { background-position:      0px; }
     to { background-position:  133.33%; }
}
@-ms-keyframes one_four {
   from { background-position:      0px; }
     to { background-position:     200%; }
}

@-o-keyframes one_two {
   from { background-position:      0px; }
     to { background-position:   66.66%; }
}
@-o-keyframes one_three {
   from { background-position:      0px; }
     to { background-position:  133.33%; }
}
@-o-keyframes one_four {
   from { background-position:      0px; }
     to { background-position:     200%; }
}

@keyframes one_two {
   from { background-position:      0px; }
     to { background-position:   66.66%; }
}
@keyframes one_three {
   from { background-position:      0px; }
     to { background-position:  133.33%; }
}
@keyframes one_four {
   from { background-position:      0px; }
     to { background-position:     200%; }
}