最近我在使用animate.css來為我的網站添加一些動畫效果,可是我遇到了一個麻煩——它不起作用!
我使用的是Bootstrap框架,并且在
標簽中引入了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>
我嘗試了許多不同的類名,但是沒有任何一個產生了動畫效果。我檢查了CSS文件的路徑和命名,都沒有問題。最終我在Stack Overflow上找到了答案。
問題在于Bootstrap框架的默認配置禁用了某些CSS動畫屬性。如果你使用的是Bootstrap框架,請將以下代碼添加到自己的CSS文件中來啟用動畫效果:
.animated { animation-duration: 1s; animation-fill-mode: both; }
希望這篇文章能幫助到其他人解決這個麻煩!