A React component for creating frame-based animations.
The following example will render contents in Frame
one at a time every 500 ms.
import { Keyframes, Frame } from "react-keyframes";
function MyComponent() {
return (
<Keyframes>
<Frame duration={500}>This</Frame>
<Frame duration={500}>This is</Frame>
<Frame duration={500}>
This is <em>animated</em>.
</Frame>
</Keyframes>
);
}
Firstly, install the package:
$ npm install --save react-keyframes
<Keyframes { component = 'span' } />
import { Keyframes } from 'react-keyframes'
component
prop specifies what component Keyframes
renders as. You can pass the following:
<Keyframes component={myComponent} />
)<Keyframes component={React.Fragment} />
)<Keyframes component='div' />
)Frame
as children.import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return <Keyframes component="pre" delay={300} className="animation-test">
<Frame>foo</Frame>
<Frame>bar</Frame>
</Keyframes>;
}
}
<Frame { duration = 0 } />
import { Frame } from 'react-keyframes'
duration
prop specifies the length of time that a frame should show (millisecond).Frame
in the order you want them animated.import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return <Keyframes>
<Frame duration={100}>foo</Frame>
<Frame duration={200}>bar</Frame>
</Keyframes>;
}
}
npm run build
to transpile the source codenpm run test