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>

：

ここでは、コードです