input[type=text] {
    border: none;
    outline: 0;
    font-size: 25px;
    width: 300px;
    height: 30px;
  }
  
  input[type=text]:focus {
    border: none;
    outline: 0;
    width: 300px;
    height: 30px;
    text-align: center;
  }
  
  .center { 
    height: 40px;
    width: 300px; 
    overflow: auto;
    margin: auto; 
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0; 
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}

  }


  body {
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }