Resize animator

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto"></script>
<div class="text-center snip-border">
    <label>Website <input id="webaddress" placeholder="http://www.site.com" /></label>
</div>

<div class="resizer">
    <iframe id="preview"></iframe>
</div>

CSS

body {
    background:#fff;
    color:#757575;
    font-family: 'Roboto', sans-serif;
}
.text-center { text-align:center; }
.snip-border { 
    border-bottom:1px solid #ddd;
    padding:20px;
    margin-bottom:30px;
}
#webaddress {
    color:#757575;
    font-family: 'Roboto', sans-serif;
    padding:5px;
    width:250px;
    margin-left:15px;
    vertical-align:middle;
    position:relative;
    top:-2px;
}
#preview {
    border:none;
    box-sizing:border-box;
    width:100%;
    height:700px;
}

.resizer {
    width:10%;
    min-width:320px;
    margin:0 auto;
    animation: animationFrames ease-in-out 6s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    -webkit-animation: animationFrames ease-in-out  6x;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
}
@keyframes animationFrames{
  0%, 10% {
    width:320px;
  }
  90%, 100% {
    width:100%
  }
}
@-webkit-keyframes animationFrames {
  0%, 10% {
    width:320px;
  }
  90%, 100% {
    width:100%
  }
}

JavaScript

$("#webaddress").on("change", function(){
    $("#preview").attr('src', $(this).val());
});