CSS animation doesn't work as expected - css

Question

I have this code: jsfiddle
The animation of the circle works fine in Firefox but fails to work smoothly in Chrome.
If I remove animation delay and duration from span element, like here, the circle is animated like it should.
What I'm doing wrong?
HTML:
<div class="box">
<div class="circle first">
<span>Lorem Ipsum</span>
</div>
</div>
CSS:
.circle {
position: absolute;
top: 50px;
left: 150px;
display: block;
border-radius: 50%;
-webkit-transition: box-shadow .25s;
transition: box-shadow .25s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
// animation
-webkit-clip-path: circle(0 at 50% 50%);
clip-path: circle(0 at 50% 50%);
-webkit-animation-name: scale-up;
animation-name: scale-up;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-timing-function: cubic-bezier(0, 0, .2, 1);
-webkit-animation-duration: 1s;
animation-duration: 1s;
background-color: #323232;
}
.circle span {
position: absolute;
top: 20px;
right: 50%;
display: block;
background-color: green;
padding: .4em .6em .3em;
webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-animation-name: slide-left;
animation-name: slide-left;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.first {
width: 17em;
height: 17em;
-webkit-animation-delay: .5s;
animation-delay: .5s;
box-shadow: 0 0 0 1.6em rgba(32, 32, 32, .1);
}
// Scale up
#-webkit-keyframes scale-up {
0% {
-webkit-clip-path: circle(0 at 50% 50%);
clip-path: circle(0 at 50% 50%);
}
99% {
-webkit-clip-path: circle(60% at 50% 50%);
clip-path: circle(60% at 50% 50%);
}
100% {
-webkit-clip-path: none;
clip-path: none;
}
}
#keyframes scale-up {
0% {
-webkit-clip-path: circle(0 at 50% 50%);
clip-path: circle(0 at 50% 50%);
}
99% {
-webkit-clip-path: circle(60% at 50% 50%);
clip-path: circle(60% at 50% 50%);
}
100% {
-webkit-clip-path: none;
clip-path: none;
}
}
#-webkit-keyframes slide-left {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes slide-left {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

Answer 1

Hope I can help you with this solution: Actually, clip-path animation fails because of span that deforms the circle shape. A solution may be to extract span from its parent (circle) and move it directly into .box container. So, span become sibling of circle. Now, the circle clip-path recovered its regular shape. Then, by defining style to .box element, we also define a new container for the span that is able move following previous locations. here is the code: https://jsfiddle.net/nesquimo/jn3dnuhm/13/
.box{
position: relative;
top: 50px;
left: 150px;
width: 17em;
height: 17em;
}
.circle {
position: absolute;
display: block;
border-radius: 50%;
-webkit-transition: box-shadow .25s;
transition: box-shadow .25s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
// animation
-webkit-clip-path: circle(0 at 50% 50%);
clip-path: circle(0 at 50% 50%);
-webkit-animation-name: scale-up;
animation-name: scale-up;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-timing-function: cubic-bezier(0, 0, .2, 1);
-webkit-animation-duration: 1s;
animation-duration: 1s;
background-color: #323232;
}
.circle__band {
position: absolute;
top: 20px;
right: 50%;
opacity: 0;
display: block;
background-color: green;
padding: .4em .6em .3em;
transform: translate3D(100%, 0, 0);
animation-name: slide-left;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-delay: 1.5s;
}
.first {
width: 17em;
height: 17em;
-webkit-animation-delay: .5s;
animation-delay: .5s;
box-shadow: 0 0 0 1.6em rgba(32, 32, 32, .1);
}
// Scale up
#-webkit-keyframes scale-up {
0% {
-webkit-clip-path: circle(0 at 50% 50%);
clip-path: circle(0 at 50% 50%);
}
99% {
-webkit-clip-path: circle(60% at 50% 50%);
clip-path: circle(60% at 50% 50%);
}
100% {
-webkit-clip-path: none;
clip-path: none;
}
}
#keyframes scale-up {
0% {
-webkit-clip-path: circle(0 at 50% 50%);
clip-path: circle(0 at 50% 50%);
}
99% {
-webkit-clip-path: circle(60% at 50% 50%);
clip-path: circle(60% at 50% 50%);
}
100% {
-webkit-clip-path: none;
clip-path: none;
}
}
// Slide left
#-webkit-keyframes slide-left {
0% {
opacity: 1;
transform: translate3D(100%,0,0);
}
100% {
opacity: 1;
transform: translate3D(0,0,0);
}
}
#keyframes slide-left {
0% {
opacity: 1;
transform: translate3D(100%,0,0);
}
100% {
opacity: 1;
transform: translate3D(0,0,0);
}
}
<div class="box">
<div class="circle first">
</div>
<span class="circle__band">Lorem Ipsum</span>
</div>