让 Compass 将供应商前缀添加到动画选择器

2024-05-13

谁能告诉我如何让 Compass 在编译时将供应商前缀添加到 CSS3 动画选择器中?我的配置文件如下所示。

http_path = "/"
css_dir = "/"
sass_dir = "/"
images_dir = "img"
javascripts_dir = "js"

output_style = :expanded
relative_assets = true
line_comments = false

我尝试过添加Compass::BrowserSupport.add_support("animation", "webkit", "moz", "ms")到它,但它不起作用。


Edit

为了回应 cimmanon 的评论,我想避免像这样重复每个选择器:

.big-wheel {
    left: 77px;
    bottom: 11px;
    -webkit-transform: rotate(0deg);
    -webkit-animation-name: wheels;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-iteration-count: infinite;
    -moz-transform: rotate(0deg);
    -moz-animation-name: wheels;
    -moz-animation-duration: 0.25s;
    -moz-animation-iteration-count: infinite;
    -ms-transform: rotate(0deg);
    -ms-animation-name: wheels;
    -ms-animation-duration: 0.25s;
    -ms-animation-iteration-count: infinite;
    transform: rotate(0deg);
    animation-name: wheels;
    animation-duration: 0.25s;
    animation-iteration-count: infinite;
}

Compass 确实有一个内置的 mixin转换 http://compass-style.org/reference/compass/css3/transform/

我没有看到网站上记录的其他项目的 mixin。如果您需要使用 Compass,您可以轻松编写自己的指南针experimental mixin http://compass-style.org/reference/compass/css3/shared/.

.foo {
    @include experimental('animation-name', wheels, webkit, moz, o, ms, not khtml);
    @include experimental('animation-duration', 0.25s, webkit, moz, o, ms, not khtml);
    // alternate way of setting prefixes
    $animation-support: webkit, moz, o, ms, not khtml;
    @include experimental('animation-iteration-count', infinite, $animation-support...);
}

编译为:

.foo {
  -webkit-animation-name: wheels;
  -moz-animation-name: wheels;
  -ms-animation-name: wheels;
  -o-animation-name: wheels;
  animation-name: wheels;
  -webkit-animation-duration: 0.25s;
  -moz-animation-duration: 0.25s;
  -ms-animation-duration: 0.25s;
  -o-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

让 Compass 将供应商前缀添加到动画选择器 的相关文章

  • 用于选择 querySelector 中当前元素的 CSS 伪选择器可用于同级 (+) 或一般同级 (~) 选择器? [复制]

    这个问题在这里已经有答案了 如果我有这个 HTML div class elem div class child div div div class sibling div 和JS let elem document querySelect
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css
  • Firefox 无法正确渲染:border-radius、box-shadow 和 border

    在下面的例子中 http jsfiddle net Du8f6 3 http jsfiddle net Du8f6 3 我将内部阴影设置为容器和 10px 边框 并将边框半径设置为 50 结果是容器边框外有奇怪的细白色边框 细白色边框在以下
  • CSS 省略号与内联元素?

    我已经调整了 jQuery UI MultiSelect Widget 以便文本将显示所有选定的标签 但如果选择显示太多元素 则文本将被修剪和省略 我是这样做的 ui multiselect selected text display bl
  • 检查元素是否在视口的 30% 到 60% 之间

    我正在尝试改变颜色 li 当元素占视口的 30 到 60 之间时 所以我有这个元素网格并排堆叠 如下所示 我遇到了一些插件 例如 Waypoints Viewport Checker 和其他一些插件 但没有什么好的 任何想法 我正在使用一个
  • HTML 表格信息

    我想知道是否有任何方法可以使 html 中的表格看起来像这样 http i43 tinypic com 21dml8l png http i43 tinypic com 21dml8l png 我基本上需要第一列中的 1 个大单元格 然后第
  • 如何在 CSS 中将子元素居中,即使它比父元素大?

    我想创建一个 css 类 以便可以将 div 放置在其父级的中心 我正在使用的代码是 centered position absolute margin auto bottom 0px left 0px top 0px right 0px
  • 如何使输入字段的宽度为 100% 减去提交按钮的宽度?

    我有一个非常基本的单一输入字段 旁边有一个 提交 按钮 搜索按钮的固定宽度为 104 像素 两者都包裹在一起 总宽度占浏览器视口的 50 我的计划是允许输入字段随着浏览器窗口的扩大而扩大 目前 对于我的特定浏览器窗口 我必须修复输入字段的宽
  • 图像未完整显示在身体背景上

    例子 http jsbin com opokev 20 http jsbin com opokev 20 完整图片 http i53 tinypic com 347a8uu jpg http i53 tinypic com 347a8uu
  • 如何在rollup中使用css @import?

    我尝试创建一个简单的汇总应用程序的配置 但在 css 方面遇到了一些麻烦 这是我的 CSS 文件 import normalize css import typeface roboto html body root height 100 f
  • CSS - 最大宽度和椭圆

    我有一个包含文本的跨度 我希望跨度扩大到最大 500px 以容纳里面的文本 达到最大值后 我希望文本为任何溢出最大宽度的文本显示省略号 这可能吗 我尝试了以下方法 但这并没有达到目的 Thanks position absolute top
  • iPad 上的网站纵向视图

    我的网站在 iPad 纵向模式下无法正确显示 它在横向模式下看起来不错 但当我将其转换为纵向模式时 我最终会得到一个混乱的网站 所有元素都分散在整个网站上 我怎样才能解决这个问题 请帮我 这是我网站的链接 inclouds co uk ht
  • Google 字体(上面有空格)无法在 IE7/IE8 上呈现

    有谁知道为什么 IE7 IE8 不会渲染 Google 字体 如果名称上有空格 您可以在这里查看演示 http jsfiddle net fYzAb 1 http jsfiddle net fYzAb 1 完全相同的两个标签 一个使用 Os
  • 如何强制 中的两个元素始终保持在同一行

    代码非常简单 table style width 100 border 0 background color white cellpadding 0 cellspacing 0 tr td style border 0 padding 0
  • 在聚合物元素中动态注入共享样式(聚合物1.2.3)

    我确实有几个自己创建的嵌套聚合物元素 目前 通过使用聚合物共享样式 我可以将自定义样式注入其他元素 不幸的是 这种方法仅限于静态使用 因此 在实现时 我确实需要通过导入共享样式模块来知道哪个元素应该使用哪种共享样式 and 但在我的用例中
  • 使用 jquery 触发 css3 关键帧

    我写了一个关键帧动画 webkit keyframes cubemove 0 webkit transform translateZ 194px rotateY 0deg 20 webkit transform translateZ 194
  • Sitecore 多种 RTE 类样式

    我可以为 RichTextEditor RTE 添加 CSS 样式路径 如下所示 并且我可以在 RTE 中选择定义的样式
  • 当位置从相对固定变为固定时,div 的宽度会发生变化

    当 div topNav 的位置样式从相对更改为固定时 其宽度会更改几个像素 我找到了一个 jquery 插件 http imakewebthings github com jquery waypoints 它可以优雅地执行我正在寻找的相同
  • 在原始颜色和设置颜色之间设置动画背景

    我有带有随机初始背景颜色的 HTML 元素 我需要在原始 初始 和新元素之间对选定元素的背景颜色进行动画处理 我一直在尝试使用 keyframes blink red 0 background color initial color ini
  • ng-show 令人不安的 div 布局 - angularJS

    我在用ng show notesOpened 如果notesOpened 变量为true 则隐藏div 然而 当隐藏时 它会扰乱布局 有没有办法让 ng show 的行为与 css 属性相同visibility hidden 以便被隐藏的

随机推荐