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 成为 circle 的兄弟。现在，圆形剪辑路径恢复了其规则形状。然后，通过为 .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>