Question

我正在开发一个仅限CSS / HTML的应用程序，没有JavaScript，没有第三方框架或插件该应用程序有很多CSS3动画构建我的css文件和类的最佳方法是什么，所以我不能一次又一次地重复我的代码？

Answer 1

我建议使用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设计的。

Answer 2

我会创建一个包含所有动画和过渡的animations.css。你应该通过一个类来解决它们 - 然后可以重新使用它。

Pankaj Parashar所回答的一切也适用于纯CSS。 Import the single CSS files using @import。以下是微调器的示例（例如，AJAX加载图标）。具有类.spin的任何元素都会转过来并再次转向ver。但与使用SCSS或LESS mixins相比，您必须自己创建所有以供应商为前缀的变体

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 */

CSS3动画项目结构

2 个答案: