Question

尝试使这个效果起作用，在chrome和opera上正常工作但不能在safari或firefox上工作。

出了什么问题？

我在html代码上使用了span标记

CSS

@-webkit-keyframes pulse {
    0% {
       -webkit-transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.3, 1.3);
    }
    100% {
        -webkit-transform: scale(1, 1);
    } 
}
@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.3, 1.3);
    }
    100% {
        transform: scale(1, 1);
    }
}

.take {
    margin-left: 40px;
    color: #c8262d;
    width: 20px;
    height: 20px;
    -webkit-animation: pulse 1s linear infinite;
    animation: pulse 1s linear infinite;
}

HTML

<span class="take">Take Action Today &DDotrahd;</span>

Answer 1

我认为您只需要在display:block;规则

中添加.take即可

.take {
    margin-left: 40px;
    color: #c8262d;
    width: 20px;
    height: 20px;
    -webkit-animation: pulse 1s linear infinite;
    animation: pulse 1s linear infinite;
    display:block;
}

http://jsfiddle.net/28q6cy2j/2/

Answer 2

这是规格（参见：http://dev.w3.org/csswg/css-transforms/#terminology ）

可转换元素
     可转换元素是以下类别之一的元素：


一个元素，其布局由CSS框模型控制，该模型块级或atomic inline-level element ，或其显示属性计算到表行，表行组，table-header-group，table-footer-group，table-cell或table-caption [CSS21]

SVG名称空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，'patternTransform'或gradientTransform [SVG11]。

所以你必须给你的元素display:inline-block，因为它是span（默认内联）

http://jsfiddle.net/p70o9r08/

演示

您对规则的width / height属性也一样。它们也不适用于内联元素。

css3 transform：scale在Safari中不起作用

2 个答案: