最近我在使用animate.css來(lái)為我的網(wǎng)站添加一些動(dòng)畫(huà)效果,可是我遇到了一個(gè)麻煩——它不起作用!
我使用的是Bootstrap框架,并且在
標(biāo)簽中引入了animate.css文件:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Website</title> <link rel="stylesheet" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h722A4+16nBj8fB3EIWVR1eDkPjHXerPfJwB6" crossorigin="anonymous"> <link rel="stylesheet" href="animate.css"> </head>
我嘗試了許多不同的類名,但是沒(méi)有任何一個(gè)產(chǎn)生了動(dòng)畫(huà)效果。我檢查了CSS文件的路徑和命名,都沒(méi)有問(wèn)題。最終我在Stack Overflow上找到了答案。
問(wèn)題在于Bootstrap框架的默認(rèn)配置禁用了某些CSS動(dòng)畫(huà)屬性。如果你使用的是Bootstrap框架,請(qǐng)將以下代碼添加到自己的CSS文件中來(lái)啟用動(dòng)畫(huà)效果:
.animated { animation-duration: 1s; animation-fill-mode: both; }
希望這篇文章能幫助到其他人解決這個(gè)麻煩!