提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[TypeStyle] Use TypeStyle keyframes to create CSS animations

CSS to create use
2023-09-14 08:59:18 时间

We cover CSS keyframes and how to create them using TypeStyle. We then show how to use the keyframes function to create an animation. We also discuss a few other CSS properties in the animation namespace.

 

import {style, keyframes, classes} from 'typestyle';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const fadeAnimationName = keyframes({
    from: {opacity: 0},
    to: {opacity: 1}
});
const fadeAnimationClassName = style({
    animationName: fadeAnimationName,
    animationDuration: '2s'
});

const coloringAnimationName = keyframes({
    '0%': {color: 'black'},
    '50%': {color: 'pink'},
    '100%': {color: 'red'}
});
const fontColoringAnimationClassName = style({
    fontSize: '20px',
    animationName: coloringAnimationName,
    animationDuration: '2s',
    animationIterationCount: 'infinite'
});

const App = () => (
    <div className={classes(
        fadeAnimationClassName,
        fontColoringAnimationClassName
    )}>
        Hello World!
    </div>

);

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

 

相关文章