CSS3動畫項目結構

-1

我正在研究CSS/HTML應用程序，沒有JavaScript，沒有第三方框架或插件。
該應用程序有很多CSS3動畫。
構建我的css文件和類的最佳方法是什麼，所以我不再重複我的代碼？CSS3動畫項目結構

2014-05-12 Evan Lévesque

我會建議使用Sass pre-processor來編寫你的CSS（尤其是SCSS版本），它可以確保你的最終輸出儘可能地乾燥，而且不需要冗餘。

我建議以下目錄結構，組織你的Sass/SCSS文件，

styles/ 
| 
|-- partials/ 
| |-- _bounce.scss 
| |-- _fade.scss 
| |-- _flip.scss 
| |-- _rotate.scss 
| |-- _wobble.scss 
| 
`-- animations.scss   # Primary Sass file

的animations.scss文件將是你的主要SCSS文件，將導入所有的諧音。在partials目錄中，您可以爲每種類型的動畫維護一個單獨的SCSS文件。

這將大量幫助您組織項目，並且解決方案具有可擴展性。例如，看看這個存儲庫是如何爲animate.scss設計的。

來源

2014-05-12 08:24:46

我會創建一個animations.css其中包含所有的動畫和轉換。你應該通過一個課程來解決他們 - 然後可以重新使用。

Pankaj Parashar所回答的所有問題也適用於純CSS。 Import the single CSS files using @import。以下是一個微調器的例子（例如AJAX加載圖標）。任何類.spin的元素都會翻過來再次翻轉。但與使用SCSS或更少的混入，你必須對自己的

animations.css創建所有供應商的前綴變體：

@keyframes spin { 
    0% { transform:rotate(0deg) } 
    100% { transform:rotate(359deg) } 
} 

.spin { 
    animation:spin 2s infinite linear 
}

的style.css：

@import 'animations.css' 
/* further rules */

來源

2014-05-12 08:38:24 feeela

欣賞的響應。由於性能開銷，我故意不建議在CSS中使用'@ import'語句，這裏有大量記錄 - http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ –

另外，OP旨在避免重複的代碼，這是很難用CSS實現的。 –

@PankajParashar最後一點是這個定義的問題。我在SCSS/LESS中看到很多糟糕的示例，它們的代碼都是在mixin中組織的，但是使用mixin調用而不是[extends]（http://sass-lang.com/documentation/file.SASS_REFERENCE.html#擴展），從而在最終輸出中創建大量重複代碼的臃腫CSS代碼。要使用預處理器創建高性能的CSS，您應該首先了解CSS， – feeela

CSS3動畫項目結構

回答

相關問題