CSS animation block border radiuss

Question

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);}
}

Possible duplicate of http://stackoverflow.com/questions/34507083/border-radius-and-overflow-arent-respected-when-animation-is-added-on-a-differe/34508062#34508062 (Can't confirm as I am accessing on mobile but adding `z-index: 1` to `.u-p` should solve the problem as mentioned in that answer. The reason is also provided there.) — Harry, Feb 08 '17 at 12:41
If your problem is with a special browser or device, it's better to mention that. I tested your code in firefox with no problem. — Farzin Kanzi, Feb 08 '17 at 12:54
@FarzinKanzi: That's correct. This problem happens only in Chrome/Webkit powered browsers because of how the WebKit (or Blink) engines create layers for accelerated rendering of web pages. Though the browser name is not mentioned in my linked answer, you can find some Chrome related articles which I linked there (inside another link :P). — Harry, Feb 08 '17 at 12:59

score 2 · Answer 1 · answered Feb 08 '17 at 12:46

You should set a position to relative or absolute, and add a z-index to your spin360 alement. But really... don't ask me why, because your code works good in Firefox.

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

<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>

Ekaterina Tokareva · Answer 2 · 2017-02-08T13:23:57.523

Elements in HTML flow from top of document to the bottom. I.e. layer, which lays at the top of the code will be shown before the layer from the bottom of the markup. You can take some layer and change its behavior. For example, you can use positioning for changing the flow of the element. In your case you should add z-index property to show span over the image. Cause in your code image is below in the flow. And by writing z-indexes you can specify the order of elements

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

Also I think this short article will be more useful for the answer about flows http://marksheet.io/css-the-flow.html

CSS animation block border radiuss

2 Answers2