Question

我正在尝试使用此css包：https://github.com/elrumordelaluz/csshake

我按照指示操作，但出于某种原因，我的页面上没有动画。

这是我的头脑：

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link type="text/css" href="css/csshake.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>
</head>

然后在我正在尝试的身体：

<div class="shake shake-constant">shake!</div>

如果我使用Chrome开发工具检查该元素，我可以看到没有任何css类应用于div。如果我将标题更改为<link type="text/css" rel="stylesheet" href="css/csshake.css">，则类会显示在开发工具中，但它们会列为无效的属性值。

我确定我遗漏了一些非常基本的东西，但我不知道该去哪里看。

Answer 1

如果您查看CSS文件，它本身不支持跨浏览器 - 您必须自己添加相关的浏览器前缀

例如，animation-name: shake-base;仅适用于允许无前缀值的浏览器（如新版本的FireFox）。要投放Chrome，您必须添加-webkit-animation-name: shake-base;

您可以使用以下工具让您的计算机为您完成大部分工作

CSSPrefixer（手动）
AutoPrefixer（自动）
Prefixr（手册）
PrefixFree（自动）

还有其他人

CSS类没有加载

1 个答案: