css3 transform: шкала не работает в Safari

попытайтесь заставить этот эффект работать, отлично работает на хроме и опера, но не работает на сафари или firefox.css3 transform: шкала не работает в Safari

что не так?

я использовал на тег диапазона на моем HTML код

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>

источник

2014-10-23 Ernesto La Fontaine

Можете ли вы добавить jsFiddle, демонстрирующий ваш код? – ReactingToAngularVues

Некоторые HTML всегда помогают добавить контекст в CSS. –

Я исправляю это, изменяя метку span для div и добавляя ширину: 300px; поплавок: правый; –

Я думаю, вам просто нужно добавить 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/

источник

2014-10-23 08:55:29 DoubleA

Это в спецификации (см: http://dev.w3.org/csswg/css-transforms/#terminology)

трансформируемые элемент
трансформируемой элемент представляет собой элемент в одной из этих категорий:

элемент макет которого определяется моделью окна CSS, которая является либо блочным уровнем, либо atomic inline-level element, либо его свойство отображения вычисляет таблицу table-row, table-row-group, 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 свойств, которые у вас есть на вашем правиле. Они также не будут применяться к встроенным элементам.

источник

2014-10-23 10:40:59

css3 transform: шкала не работает в Safari

ответ

Смежные вопросы