When the animation is going, border-radius doesn't work, after animation is done, border-radius starts working, any solution?

<http://codepen.io/anon/pen/jyvKpq>

HTML:

```
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">

<div><i class='fa fa-spinner spin360'></i> Text...</div>

<span class="u-p">
  <img src="https://68.media.tumblr.com/30ecad5922df68e02bec6e9dc88f95da/tumblr_oe204wOZrX1votm1fo1_500.jpg">
</span>

```

CSS:

```
.u-p {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
    width:65px;
    height:65px;

}
.u-p img {
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    margin: auto;
    width: 65px;
    height: auto;
    min-height: 100%;
    min-width: 65px;
}
.spin360 {
  animation-name: spin360;
  animation-duration: 1.5s;
}
@keyframes spin360 {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

```