使用其他元素包裝時，CSS動畫不起作用

Question

我有以下HTML和CSS動畫，並按預期工作。

app-root { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    transition: all 0.8s ease-out; 
 
} 
 

 
body { 
 
    background: #FFFFFF; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.loading h1 { 
 
    color: #272C33; 
 

 
    font-size: 1.5em; 
 
    font-family: -apple-system, 
 
    "BlinkMacSystemFont", 
 
    "Segoe UI", 
 
    "Roboto", 
 
    "Oxygen-Sans", 
 
    "Ubuntu", 
 
    "Cantarell", 
 
    "Helvetica", 
 
    sans-serif; 
 

 
    text-align: center; 
 
} 
 

 
@keyframes dots { 
 
    50% { 
 
    transform: translateY(-0.25em); 
 
    } 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
} 
 

 
.d { 
 
    animation: dots 2.0s ease-out infinite; 
 
} 
 
.d-2 { 
 
    animation-delay: 0.5s; 
 
} 
 
.d-3 { 
 
    animation-delay: 1s; 
 
}

<app-root> 
 
    Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span> 
 
</app-root>

但是，當「加載」部分包裹着div和H1，動畫不工作了。

app-root { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    transition: all 0.8s ease-out; 
 
} 
 

 
body { 
 
    background: #FFFFFF; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.loading h1 { 
 
    color: #272C33; 
 

 
    font-size: 1.5em; 
 
    font-family: -apple-system, 
 
    "BlinkMacSystemFont", 
 
    "Segoe UI", 
 
    "Roboto", 
 
    "Oxygen-Sans", 
 
    "Ubuntu", 
 
    "Cantarell", 
 
    "Helvetica", 
 
    sans-serif; 
 

 
    text-align: center; 
 
} 
 

 
@keyframes dots { 
 
    50% { 
 
    transform: translateY(-0.25em); 
 
    } 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
} 
 

 
.d { 
 
    animation: dots 2.0s ease-out infinite; 
 
} 
 
.d-2 { 
 
    animation-delay: 0.5s; 
 
} 
 
.d-3 { 
 
    animation-delay: 1s; 
 
}

<app-root> 
 
    <div class="loading"> 
 
    <h1>Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span></h1> 
 
    </div> 
 
</app-root>

是我錯了地方的動畫CSS因爲圍件/指定的錯誤？

Answer 1

CSS變換doesn't work on inline text elements。您需要設置display: block或display: inline-block到.d：

.d { 
    display: inline-block; 
    animation: dots 2.0s ease-out infinite; 
} 

例子：

app-root { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    transition: all 0.8s ease-out; 
 
} 
 

 
body { 
 
    background: #FFFFFF; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.loading h1 { 
 
    color: #272C33; 
 

 
    font-size: 1.5em; 
 
    font-family: -apple-system, 
 
    "BlinkMacSystemFont", 
 
    "Segoe UI", 
 
    "Roboto", 
 
    "Oxygen-Sans", 
 
    "Ubuntu", 
 
    "Cantarell", 
 
    "Helvetica", 
 
    sans-serif; 
 

 
    text-align: center; 
 
} 
 

 
@keyframes dots { 
 
    50% { 
 
    transform: translateY(-0.25em); 
 
    } 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
} 
 

 
.d { 
 
    display: inline-block; 
 
    animation: dots 2.0s ease-out infinite; 
 
} 
 
.d-2 { 
 
    animation-delay: 0.5s; 
 
} 
 
.d-3 { 
 
    animation-delay: 1s; 
 
}

<app-root> 
 
    <div class="loading"> 
 
    <h1>Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span></h1> 
 
    </div> 
 
</app-root>

Answer 2

這是爲什麼：

CSS transform doesn't work on inline elements

要解決這個問題，設置.d有inline-block元素。

.d { 
    display: inline-block; 
    animation: dots 2.0s ease-out infinite; 
} 

app-root { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    transition: all 0.8s ease-out; 
 
} 
 

 
body { 
 
    background: #FFFFFF; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.loading h1 { 
 
    color: #272C33; 
 

 
    font-size: 1.5em; 
 
    font-family: -apple-system, 
 
    "BlinkMacSystemFont", 
 
    "Segoe UI", 
 
    "Roboto", 
 
    "Oxygen-Sans", 
 
    "Ubuntu", 
 
    "Cantarell", 
 
    "Helvetica", 
 
    sans-serif; 
 

 
    text-align: center; 
 
} 
 

 
@keyframes dots { 
 
    50% { 
 
    transform: translateY(-0.25em); 
 
    } 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
} 
 

 
.d { 
 
    display: inline-block; 
 
    animation: dots 2.0s ease-out infinite; 
 
} 
 
.d-2 { 
 
    animation-delay: 0.5s; 
 
} 
 
.d-3 { 
 
    animation-delay: 1s; 
 
}

<app-root> 
 
    <div class="loading"> 
 
    <h1>Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span></h1> 
 
    </div> 
 
</app-root>