CSS动画不能按预期工作

Question

我有这段代码：jsfiddle 该圈子的动画在Firefox中工作正常，但无法在Chrome中顺利运行。

如果我从span元素中删除动画延迟和持续时间，例如here，则圆圈应该像它应该那样动画。

我在做什么错了？

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

希望我可以帮你这个解决方案：

其实，剪辑路径动画失败，因为跨度变形圆形状。

一个解决方案可能是从其父（圆）中提取span，并将其直接移动到容器中。所以，跨度成为圈子的兄弟姐妹。现在，圆形剪辑路径恢复了其正常形状。然后，通过将样式定义为.box元素，我们还为span定义了一个新的容器，可以在之前的位置之后移动。

这里是代码：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>