*
{
  margin:0;
  padding:0;
  font-family: 'Lobster', cursive;
}
html, body,.bod
{
  background-color:#FF0;
  height:100%;
  width:110%;
  background: linear-gradient(180deg, rgba(255,0,0,0.75), rgba(0,0,255,0.75));
  background-size: 400% 400%;
  -webkit-animation: back2 1s ease infinite;
  -moz-animation: back2 1s ease infinite;
  animation: back2 1s ease infinite;
}
body
{
  background: url(https://kenteken.tk/media/Daniboy.png);
}
@keyframes back1 {
  0%  {
    color:#02ff00;
  }
  50% {
    color:#6000ff;
  }
  100%  {
    color:#02ff00;
  }
}
@-webkit-keyframes back1 {
  0%  {
    color:#02ff00;
  }
  50% {
    color:#6000ff;
  }
  100%  {
    color:#02ff00;
  }
}
@-webkit-keyframes back2 {
  0%{background-position:50% 0%}
  50%{background-position:51% 100%}
  100%{background-position:50% 0%}
}
@-moz-keyframes back2 {
  0%{background-position:50% 0%}
  50%{background-position:51% 100%}
  100%{background-position:50% 0%}
}
@keyframes back2 {
  0%{background-position:50% 0%}
  50%{background-position:51% 100%}
  100%{background-position:50% 0%}
}
.box1{
  background: url(d.jpg);
  background-size:100% 100%;
  width:5%;
  height:130px;
  animation: box1 3s linear infinite;/* firefox shizl */
  -webkit-animation: box1 3s linear infinite; /* Chrome, Safari, Opera */
}
@keyframes box1 {
  0% { 
    border-radius: 50% 50% 50% 50%;
    transform: rotate(0deg);
    padding:0;
  }
  50% { 
    border-radius: 0px 0px 0px 0px;
    transform: rotate(180deg);
    padding:10%;
    width:5%
  }
  100% { 
    border-radius: 50% 50% 50% 50%;
    transform: rotate(360deg);
    padding:0;
  }
}
@-webkit-keyframes box1{
  0% { 
    border-radius: 50% 50% 50% 50%;
    transform: rotate(0deg);
    padding:0;
  }
  50% { 
    border-radius: 0px 0px 0px 0px;
    transform: rotate(180deg);
    padding:10%;
  }
  100% { 
    border-radius: 50% 50% 50% 50%;
    transform: rotate(360deg);
    padding:0;
  }
}
.box2{
  background: url(d.jpg);
  background-size:100% 100%;
  width:5%;
  height:130px;
  animation: box2 3s linear infinite;/* firefox shizl */
  -webkit-animation: box2 3s linear infinite; /* Chrome, Safari, Opera */
}
@keyframes box2 {
  0% { 
    border-radius: 0px 0px 0px 0px;
    transform: rotate(360deg);
    padding:10%;
  }
  50% { 
    border-radius: 50% 50% 50% 50%;
    transform: rotate(180deg);
    padding:0;
  }
  100% { 
    border-radius: 0px 0px 0px 0px;
    transform: rotate(0deg);
    padding:10%;
  }
}
@-webkit-keyframes box2{
  0% { 
    border-radius: 0px 0px 0px 0px;
    transform: rotate(360deg);
    padding:10%;
  }
  50% { 
    border-radius: 50% 50% 50% 50%;
    transform: rotate(180deg);
    padding:0;
  }
  100% { 
    border-radius: 0px 0px 0px 0px;
    transform: rotate(0deg);
    padding:10%;
  }
}
.frame1
{
  margin:300px 0 5px;
  text-align:left;
  width:100%;
  position:absolute;
  text-align:center;
  font-size:4em;
  font-family:Sans-Serif;
  background: linear-gradient(180deg, rgba(132,6,255,0.75), rgba(238,255,0,0.75));
  background-size: 400% 400%;
  -webkit-animation: back2 2s ease infinite;
  -moz-animation: back2 2s ease infinite;
  animation: back2 2s ease infinite;
}
.frame
{
  display:inline;
}