diff --git a/interfaces/inline-style-prefixer.js b/interfaces/inline-style-prefixer.js
index 9ee6a94e..4c03e86b 100644
--- a/interfaces/inline-style-prefixer.js
+++ b/interfaces/inline-style-prefixer.js
@@ -1,6 +1,8 @@
declare class InlineStylePrefixer {
static prefixAll(style: Object): Object;
+ prefixedKeyframes: string;
+
constructor(config: {
keepUnprefixed?: bool,
userAgent?: ?string
diff --git a/src/__tests__/keyframes-test.js b/src/__tests__/keyframes-test.js
index 2810fad4..cdf81536 100644
--- a/src/__tests__/keyframes-test.js
+++ b/src/__tests__/keyframes-test.js
@@ -5,7 +5,33 @@ import {expectCSS, getElement} from 'test-helpers';
import React, {Component} from 'react';
import TestUtils from 'react-addons-test-utils';
+const CHROME_14_USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 ' +
+ '(KHTML, like Gecko) Chrome/14.0.812.0 Safari/535.1';
+
describe('keyframes', () => {
+ it('adds prefix to keyframes when needed', () => {
+ const anim = keyframes({from: {left: 0}, to: {left: 100}}, 'slide');
+ class TestComponent extends Component {
+ render() {
+ return (
+
+ );
+ }
+ }
+
+ const output = TestUtils.renderIntoDocument();
+ const style = getElement(output, 'style');
+
+ expectCSS(style, `
+ @-webkit-keyframes slide-radium-animation-1bdcc98d {
+ from {left: 0;}
+ to {left: 100px;}
+ }
+ `);
+ });
it('renders keyframes in root style component', () => {
const animation = keyframes({
@@ -24,7 +50,7 @@ describe('keyframes', () => {
const style = getElement(output, 'style');
expectCSS(style, `
- @-webkit-keyframes SlideFromLeft-radium-animation-1b668a10 {
+ @keyframes SlideFromLeft-radium-animation-1b668a10 {
from{
left: -1000px;
}
@@ -52,7 +78,7 @@ describe('keyframes', () => {
const style = getElement(output, 'style');
expectCSS(style, `
- @-webkit-keyframes SlideFromLeft-radium-animation-ab5ed129 {
+ @keyframes SlideFromLeft-radium-animation-ab5ed129 {
from{
left: -1000px;
}
@@ -92,7 +118,7 @@ describe('keyframes', () => {
const style = getElement(output, 'style');
expectCSS(style, `
- @-webkit-keyframes SlideFromLeft-radium-animation-1b668a10 {
+ @keyframes SlideFromLeft-radium-animation-1b668a10 {
from{
left: -1000px;
}
diff --git a/src/keyframes.js b/src/keyframes.js
index 73096ecb..dea4c438 100644
--- a/src/keyframes.js
+++ b/src/keyframes.js
@@ -2,6 +2,7 @@
import cssRuleSetToString from './css-rule-set-to-string';
import hash from './hash';
+import {getPrefixedKeyframes} from './prefixer';
export type Keyframes = {
__radiumKeyframes: bool,
@@ -15,7 +16,7 @@ export default function keyframes(
return {
__radiumKeyframes: true,
__process(userAgent) {
- const keyframesPrefixed = '-webkit-keyframes';
+ const keyframesPrefixed = getPrefixedKeyframes(userAgent);
const rules = Object.keys(keyframeRules).map(percentage =>
cssRuleSetToString(
percentage,
diff --git a/src/prefixer.js b/src/prefixer.js
index 4d46602a..67eca9c7 100644
--- a/src/prefixer.js
+++ b/src/prefixer.js
@@ -22,12 +22,7 @@ let hasWarnedAboutUserAgent = false;
let lastUserAgent;
let prefixer;
-// Returns a new style object with vendor prefixes added to property names
-// and values.
-export function getPrefixedStyle(
- style: Object,
- userAgent?: ?string,
-): Object {
+function getPrefixer(userAgent: ?string): InlineStylePrefixer {
const actualUserAgent = userAgent ||
(global && global.navigator && global.navigator.userAgent);
@@ -48,7 +43,20 @@ export function getPrefixedStyle(
prefixer = new InlineStylePrefixer({userAgent: actualUserAgent});
lastUserAgent = actualUserAgent;
}
+ return prefixer;
+}
+export function getPrefixedKeyframes(userAgent?: ?string): string {
+ return getPrefixer(userAgent).prefixedKeyframes;
+}
+
+// Returns a new style object with vendor prefixes added to property names
+// and values.
+export function getPrefixedStyle(
+ style: Object,
+ userAgent?: ?string,
+): Object {
+ const prefixer = getPrefixer(userAgent);
const prefixedStyle = prefixer.prefix(style);
const prefixedStyleWithFallbacks = transformValues(prefixedStyle);
return prefixedStyleWithFallbacks;