基于React的随机文本生成组件

Random Text Component 用来制作文本分割相关的文本特效

react, 文本效果

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 796
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var _class, _temp, _class2, _temp2;

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

var text = 'Wunderlicher Alter, \nSoll ich mit dir geh\'n?\nWillst zu meinen Liedern\nDeine Leier dreh\'n?';

// Cycle animation
var fadeInOut = true;
// Time to complete animation. Proportional to framerate
var animationDuration = 4000;
// Time it takes each letter to fade in. Inversely proportional to framerate
var animationSpeed = 1000;
var fontSize = 50;

// Keep synced with scss
var numKeyframes = 20;

// Setup 2

// let text = `
// Wo ein treues Herze
// In Liebe vergeht,
// Da welken die Lilien
// Auf jedem Beet;
// Da muß in die Wolken
// Der Vollmond gehn,
// Damit seine Tränen
// Die Menschen nicht sehn;
// Da halten die Englein
// Die Augen sich zu
// Und schluchzen und singen
// Die Seele zur Ruh.`

// const fadeInOut = true;
// const animationDuration = 8000
// const animationSpeed = 800
// const fontSize = 34
// const numKeyframes = 20

// ---------------------------------------------------------------
text = text.replace(/\n/i, '');
var p = React.PropTypes;

var Letter = (_temp = _class = function(_React$Component) {
    _inherits(Letter, _React$Component);

function Letter() {
        _classCallCheck(this, Letter);

var _this = _possibleConstructorReturn(this, _React$Component.call(this));

_this.state = {
            show: false,
            animate: true
        };
        _this.timeouts = [];
        return _this;
    }

Letter.prototype.componentDidMount = function componentDidMount() {
        if (this.props.animate === 'in') {
            this._fadeIn();
        }
    };

Letter.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
        if (nextProps.animate !== this.props.animate) {
            if (nextProps.animate === 'in') {
                this._fadeIn();
            } else {
                this._fadeOut();
            }
        }
    };

Letter.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
        return nextState.fade !== this.state.fade || nextState.show !== this.state.show || nextProps.x !== this.props.x || nextProps.y !== this.props.y || nextProps.fontHeight !== this.props.fontHeight;
    };

Letter.prototype.componentWillUnmount = function componentWillUnmount() {
        this.timeouts.forEach(function(timeout) {
            return clearTimeout(timeout);
        });
    };

// render component and animate in

Letter.prototype._fadeIn = function _fadeIn() {
        var _this2 = this;

this.timeouts.push(setTimeout(function() {
            _this2.timeouts.push(_this2.setState({
                fade: 'in',
                show: true
            }));
            // Disable animation after fade in
            _this2.timeouts.push(setTimeout(function() {
                return _this2.setState({
                    animate: false
                });
            }, _this2.animationSpeed));
        }, this.props.animationStart + Math.random() * this.props.animationSpeed));
    };

// animate out then stop rendering

Letter.prototype._fadeOut = function _fadeOut() {
        var _this3 = this;

this.timeouts.push(setTimeout(function() {
            _this3.setState({
                fade: 'out',
                animate: true
            });
            _this3.timeouts.push(setTimeout(function() {
                _this3.setState({
                    show: false
                });
            }, _this3.props.animationSpeed));
        }, this.props.animationStart + Math.random() * this.props.animationSpeed));
    };

Letter.prototype.render = function render() {
        if (!this.state.show) {
            return null;
        }
        var keyframe = Math.floor(Math.random() * this.props.numKeyframes + 1);
        var easingFunction = 'cubic-bezier(.85,0,.54,1)';
        var proportionalPosition = this.props.i / this.props.textLen;
        var transitionDelay = proportionalPosition / 2 + Math.random() * proportionalPosition;
        return React.createElement(
            'div', {
                className: 'letter',
                style: {
                    fontSize: this.props.fontHeight,
                    height: this.props.fontHeight,
                    width: this.props.fontHeight / 2,
                    left: this.props.x,
                    top: this.props.y,
                    transition: '\n            top 1s ' + easingFunction + ' ' + transitionDelay + 's,\n            left 1s ' + easingFunction + ' ' + transitionDelay + 's,\n            font-size 1s ' + easingFunction + ' ' + transitionDelay + 's\n          ',
                    animation: this.state.animate ? '\n              ' + ('fade-' + this.state.fade + '-' + keyframe) + '\n              ' + easingFunction + '\n              ' + this.props.animationSpeed + 'ms forwards\n            ' : null
                }
            },
            this.props.char
        );
    };

return Letter;
}(React.Component), _class.propTypes = {
    x: p.number.isRequired,
    y: p.number.isRequired,
    i: p.number.isRequired,
    textLen: p.number.isRequired,
    char: p.string.isRequired,
    fontHeight: p.number.isRequired,
    numKeyframes: p.number.isRequired,
    animate: p.oneOf(['in', 'out']),
    animationSpeed: p.number.isRequired,
    animationStart: p.number.isRequired
}, _temp);
var RandomText = (_temp2 = _class2 = function(_React$Component2) {
    _inherits(RandomText, _React$Component2);

function RandomText() {
        _classCallCheck(this, RandomText);

var _this4 = _possibleConstructorReturn(this, _React$Component2.call(this));

_this4.state = {
            numRows: null,
            chars: null,
            updated: false
        };
        return _this4;
    }

RandomText.prototype.componentDidMount = function componentDidMount() {
        this.setState(this._mapCharPositions(this.props));
    };

RandomText.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
        if (nextProps.fontHeight !== this.props.fontHeight || nextProps.width !== this.props.width) {
            this.setState(this._mapCharPositions(nextProps));
        }
    };

RandomText.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
        if (this.state.updated) {
            this.setState({
                updated: false
            });
            return true;
        }
        return nextProps.animate !== this.props.animate || this.state.chars === null;
    };

// returns an array of chars w/ form [x, y, char]

RandomText.prototype._mapCharPositions = function _mapCharPositions(props) {
        var fontWidth = props.fontHeight / 2;
        var charsPerRow = Math.floor(props.width / fontWidth);
        var emptySpaceInRow = props.width - charsPerRow * fontWidth;
        var margin = emptySpaceInRow / (charsPerRow + 1);
        var chars = [];
        var text = props.text.trim();
        var textLength = text.length;

var firstLetterOfWord = true;
        for (var i = 0; i < textLength; i++) {
            var col = i % charsPerRow;

// Don't push spaces into the array, and if there is a space at the
            // beginning of a line, remove it from the original text and put the next
            // character in its place
            if (text[i] === ' ') {
                firstLetterOfWord = true;
                if (col === 0) {
                    text = text.slice(0, i) + text.slice(i + 1);
                    i--;
                    textLength--;
                }
            } else {
                // Handle text wrapping
                if (firstLetterOfWord) {
                    var wordLength = 1;
                    var wordCounter = 1;
                    while (i + wordCounter < text.length && text[i + wordCounter] !== ' ') {
                        wordLength++;
                        wordCounter++;
                    }
                    firstLetterOfWord = false;

RandomText.prototype.render = function render() {
        var _this5 = this;

if (this.state.chars == null) {
            return null;
        } else {
            return React.createElement(
                'div', {
                    className: 'container' + ' ' + this.props.className,
                    style: {
                        height: this.state.numRows * this.props.fontHeight,
                        width: this.props.width
                    }
                },
                this.state.chars.map(function(char, i) {
                    return React.createElement(Letter, {
                        x: char[0],
                        y: char[1],
                        char: char[2],
                        fontHeight: _this5.props.fontHeight,
                        numKeyframes: 20,
                        key: i,
                        i: i,
                        textLen: _this5.props.text.length,
                        animate: _this5.props.animate,
                        animationSpeed: _this5.props.animationSpeed,
                        animationStart: (_this5.props.animationDuration - _this5.props.animationSpeed) / _this5.state.chars.length * i
                    });
                })
            );
        }
    };

return RandomText;
}(React.Component), _class2.propTypes = {
    text: p.string.isRequired,
    className: p.string,
    width: p.number.isRequired,
    // Sets font-size
    fontHeight: p.number.isRequired,
    // Duration of each letter's fade in animation
    animationSpeed: p.number.isRequired,
    // Total animation duration (not counting randomness factor)
    animationDuration: p.number.isRequired,
    animate: p.oneOf(['in', 'out']),
    homePage: p.bool
}, _temp2);

var App = function(_React$Component3) {
    _inherits(App, _React$Component3);

function App() {
        _classCallCheck(this, App);

var _this6 = _possibleConstructorReturn(this, _React$Component3.call(this));

_this6.state = {
            animate: 'in',
            width: document.body.offsetWidth * .6
        };
        if (fadeInOut) {
            setInterval(function() {
                _this6.setState({
                    animate: _this6.state.animate == 'in' ? 'out' : 'in'
                });
            }, animationDuration + 5000);
        }
        return _this6;
    }

App.prototype.componentWillMount = function componentWillMount() {
        this._setupResizeListener();
    };

App.prototype.render = function render() {
        return React.createElement(RandomText, {
            width: this.state.width,
            text: text,
            fontHeight: fontSize,
            animate: this.state.animate,
            animationDuration: animationDuration,
            animationSpeed: animationSpeed
        });
    };

App.prototype._getWindowWidth = function _getWindowWidth() {
        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    };

App.prototype._setupResizeListener = function _setupResizeListener() {
        // Create "window.throttledResize" event that listens to resize and throttles it to fire once per frame at most
        // https://developer.mozilla.org/en-US/docs/Web/Events/resize#requestAnimationFrame_customEvent
        var running = false;
        var throttleResize = function throttleResize() {
            if (!running) {
                running = true;
                requestAnimationFrame(function() {
                    window.dispatchEvent(new CustomEvent('throttledResize'));
                    running = false;
                });
            }
        };
        window.addEventListener('resize', throttleResize);
        window.addEventListener('throttledResize', this._handleResize.bind(this));
    };

App.prototype._handleResize = function _handleResize() {
        var width = this._getWindowWidth();
        if (Math.abs(width * .6 - this.state.width) > 100) {
            this.setState({
                width: width * .6
            });
        }
    };

return App;
}(React.Component);

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

编译

CSS

body{margin: 0;}
body,
#app {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 480px;
    width: 100%;
    min-width: 320px;
    overflow: hidden;
}
#app {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-radial-gradient(circle, #222222, #0e0e0e);
    background: radial-gradient(circle, #222222, #0e0e0e);
    color: white;
    font-family: 'Inconsolata';
    font-size: 40px;
}
.container {
    position: relative;
}
.letter {
    position: absolute;
}
@-webkit-keyframes fade-in-1 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-21px, 57px, 72px) rotate3d(0.78242, 0.4566, 0.15604, 180deg);
        transform: translate3d(-21px, 57px, 72px) rotate3d(0.78242, 0.4566, 0.15604, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-1 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-21px, 57px, 72px) rotate3d(0.78242, 0.4566, 0.15604, 180deg);
        transform: translate3d(-21px, 57px, 72px) rotate3d(0.78242, 0.4566, 0.15604, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-1 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(64px, 96px, -120px) rotate3d(0.23316, 0.61337, 0.27426, 180deg);
        transform: translate3d(64px, 96px, -120px) rotate3d(0.23316, 0.61337, 0.27426, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-1 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(64px, 96px, -120px) rotate3d(0.23316, 0.61337, 0.27426, 180deg);
        transform: translate3d(64px, 96px, -120px) rotate3d(0.23316, 0.61337, 0.27426, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-81px, -93px, -13px) rotate3d(0.52621, 0.72254, 0.34082, 180deg);
        transform: translate3d(-81px, -93px, -13px) rotate3d(0.52621, 0.72254, 0.34082, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-81px, -93px, -13px) rotate3d(0.52621, 0.72254, 0.34082, 180deg);
        transform: translate3d(-81px, -93px, -13px) rotate3d(0.52621, 0.72254, 0.34082, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-2 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(63px, -49px, 35px) rotate3d(0.88294, 0.00221, 0.91652, 180deg);
        transform: translate3d(63px, -49px, 35px) rotate3d(0.88294, 0.00221, 0.91652, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-2 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(63px, -49px, 35px) rotate3d(0.88294, 0.00221, 0.91652, 180deg);
        transform: translate3d(63px, -49px, 35px) rotate3d(0.88294, 0.00221, 0.91652, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-3 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(26px, -141px, -67px) rotate3d(0.23753, 0.80208, 0.51876, 180deg);
        transform: translate3d(26px, -141px, -67px) rotate3d(0.23753, 0.80208, 0.51876, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-3 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(26px, -141px, -67px) rotate3d(0.23753, 0.80208, 0.51876, 180deg);
        transform: translate3d(26px, -141px, -67px) rotate3d(0.23753, 0.80208, 0.51876, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-3 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-103px, -146px, 33px) rotate3d(0.08056, 0.36983, 0.92842, 180deg);
        transform: translate3d(-103px, -146px, 33px) rotate3d(0.08056, 0.36983, 0.92842, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-3 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-103px, -146px, 33px) rotate3d(0.08056, 0.36983, 0.92842, 180deg);
        transform: translate3d(-103px, -146px, 33px) rotate3d(0.08056, 0.36983, 0.92842, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-4 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-122px, 11px, 24px) rotate3d(0.15235, 0.61993, 0.8509, 180deg);
        transform: translate3d(-122px, 11px, 24px) rotate3d(0.15235, 0.61993, 0.8509, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-4 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-122px, 11px, 24px) rotate3d(0.15235, 0.61993, 0.8509, 180deg);
        transform: translate3d(-122px, 11px, 24px) rotate3d(0.15235, 0.61993, 0.8509, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-4 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-27px, 110px, -75px) rotate3d(0.03541, 0.81774, 0.39552, 180deg);
        transform: translate3d(-27px, 110px, -75px) rotate3d(0.03541, 0.81774, 0.39552, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-4 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-27px, 110px, -75px) rotate3d(0.03541, 0.81774, 0.39552, 180deg);
        transform: translate3d(-27px, 110px, -75px) rotate3d(0.03541, 0.81774, 0.39552, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-5 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-149px, 129px, -90px) rotate3d(0.76285, 0.63042, 0.60015, 180deg);
        transform: translate3d(-149px, 129px, -90px) rotate3d(0.76285, 0.63042, 0.60015, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-5 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-149px, 129px, -90px) rotate3d(0.76285, 0.63042, 0.60015, 180deg);
        transform: translate3d(-149px, 129px, -90px) rotate3d(0.76285, 0.63042, 0.60015, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-5 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(22px, -109px, 82px) rotate3d(0.26061, 0.21568, 0.4357, 180deg);
        transform: translate3d(22px, -109px, 82px) rotate3d(0.26061, 0.21568, 0.4357, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-5 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(22px, -109px, 82px) rotate3d(0.26061, 0.21568, 0.4357, 180deg);
        transform: translate3d(22px, -109px, 82px) rotate3d(0.26061, 0.21568, 0.4357, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-6 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-36px, 129px, -134px) rotate3d(0.57683, 0.08713, 0.53308, 180deg);
        transform: translate3d(-36px, 129px, -134px) rotate3d(0.57683, 0.08713, 0.53308, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-6 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-36px, 129px, -134px) rotate3d(0.57683, 0.08713, 0.53308, 180deg);
        transform: translate3d(-36px, 129px, -134px) rotate3d(0.57683, 0.08713, 0.53308, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-6 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(49px, -52px, 4px) rotate3d(0.70675, 0.72357, 0.29983, 180deg);
        transform: translate3d(49px, -52px, 4px) rotate3d(0.70675, 0.72357, 0.29983, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-6 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(49px, -52px, 4px) rotate3d(0.70675, 0.72357, 0.29983, 180deg);
        transform: translate3d(49px, -52px, 4px) rotate3d(0.70675, 0.72357, 0.29983, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-7 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-31px, 13px, -12px) rotate3d(0.84313, 0.5929, 0.75149, 180deg);
        transform: translate3d(-31px, 13px, -12px) rotate3d(0.84313, 0.5929, 0.75149, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-7 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-31px, 13px, -12px) rotate3d(0.84313, 0.5929, 0.75149, 180deg);
        transform: translate3d(-31px, 13px, -12px) rotate3d(0.84313, 0.5929, 0.75149, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-7 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(11px, -30px, -60px) rotate3d(0.06943, 0.53016, 0.76894, 180deg);
        transform: translate3d(11px, -30px, -60px) rotate3d(0.06943, 0.53016, 0.76894, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-7 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(11px, -30px, -60px) rotate3d(0.06943, 0.53016, 0.76894, 180deg);
        transform: translate3d(11px, -30px, -60px) rotate3d(0.06943, 0.53016, 0.76894, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-8 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-24px, -73px, 150px) rotate3d(0.91201, 0.79317, 0.65811, 180deg);
        transform: translate3d(-24px, -73px, 150px) rotate3d(0.91201, 0.79317, 0.65811, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-8 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-24px, -73px, 150px) rotate3d(0.91201, 0.79317, 0.65811, 180deg);
        transform: translate3d(-24px, -73px, 150px) rotate3d(0.91201, 0.79317, 0.65811, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-8 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-120px, 40px, -65px) rotate3d(0.48115, 0.59133, 0.49112, 180deg);
        transform: translate3d(-120px, 40px, -65px) rotate3d(0.48115, 0.59133, 0.49112, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-8 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-120px, 40px, -65px) rotate3d(0.48115, 0.59133, 0.49112, 180deg);
        transform: translate3d(-120px, 40px, -65px) rotate3d(0.48115, 0.59133, 0.49112, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-9 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(111px, 71px, -74px) rotate3d(0.92846, 0.69155, 0.05826, 180deg);
        transform: translate3d(111px, 71px, -74px) rotate3d(0.92846, 0.69155, 0.05826, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-9 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(111px, 71px, -74px) rotate3d(0.92846, 0.69155, 0.05826, 180deg);
        transform: translate3d(111px, 71px, -74px) rotate3d(0.92846, 0.69155, 0.05826, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-9 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(1px, -14px, 147px) rotate3d(0.18719, 0.22177, 0.55491, 180deg);
        transform: translate3d(1px, -14px, 147px) rotate3d(0.18719, 0.22177, 0.55491, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-9 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(1px, -14px, 147px) rotate3d(0.18719, 0.22177, 0.55491, 180deg);
        transform: translate3d(1px, -14px, 147px) rotate3d(0.18719, 0.22177, 0.55491, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-10 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(96px, 56px, 45px) rotate3d(0.91833, 0.85793, 0.60264, 180deg);
        transform: translate3d(96px, 56px, 45px) rotate3d(0.91833, 0.85793, 0.60264, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-10 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(96px, 56px, 45px) rotate3d(0.91833, 0.85793, 0.60264, 180deg);
        transform: translate3d(96px, 56px, 45px) rotate3d(0.91833, 0.85793, 0.60264, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-10 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-83px, 101px, -15px) rotate3d(0.28379, 0.2868, 0.26593, 180deg);
        transform: translate3d(-83px, 101px, -15px) rotate3d(0.28379, 0.2868, 0.26593, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-10 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-83px, 101px, -15px) rotate3d(0.28379, 0.2868, 0.26593, 180deg);
        transform: translate3d(-83px, 101px, -15px) rotate3d(0.28379, 0.2868, 0.26593, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-11 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-68px, -99px, 17px) rotate3d(0.02326, 0.31483, 0.58546, 180deg);
        transform: translate3d(-68px, -99px, 17px) rotate3d(0.02326, 0.31483, 0.58546, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-11 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-68px, -99px, 17px) rotate3d(0.02326, 0.31483, 0.58546, 180deg);
        transform: translate3d(-68px, -99px, 17px) rotate3d(0.02326, 0.31483, 0.58546, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-11 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(147px, -110px, 102px) rotate3d(0.93242, 0.18193, 0.11835, 180deg);
        transform: translate3d(147px, -110px, 102px) rotate3d(0.93242, 0.18193, 0.11835, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-11 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(147px, -110px, 102px) rotate3d(0.93242, 0.18193, 0.11835, 180deg);
        transform: translate3d(147px, -110px, 102px) rotate3d(0.93242, 0.18193, 0.11835, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-12 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-112px, 25px, 4px) rotate3d(0.02786, 0.72622, 0.22427, 180deg);
        transform: translate3d(-112px, 25px, 4px) rotate3d(0.02786, 0.72622, 0.22427, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-12 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-112px, 25px, 4px) rotate3d(0.02786, 0.72622, 0.22427, 180deg);
        transform: translate3d(-112px, 25px, 4px) rotate3d(0.02786, 0.72622, 0.22427, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-12 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(21px, 62px, -114px) rotate3d(0.72877, 0.23789, 0.89013, 180deg);
        transform: translate3d(21px, 62px, -114px) rotate3d(0.72877, 0.23789, 0.89013, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-12 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(21px, 62px, -114px) rotate3d(0.72877, 0.23789, 0.89013, 180deg);
        transform: translate3d(21px, 62px, -114px) rotate3d(0.72877, 0.23789, 0.89013, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-13 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(117px, 53px, 61px) rotate3d(0.26025, 0.36837, 0.31697, 180deg);
        transform: translate3d(117px, 53px, 61px) rotate3d(0.26025, 0.36837, 0.31697, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-13 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(117px, 53px, 61px) rotate3d(0.26025, 0.36837, 0.31697, 180deg);
        transform: translate3d(117px, 53px, 61px) rotate3d(0.26025, 0.36837, 0.31697, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-13 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(114px, -6px, -66px) rotate3d(0.81343, 0.74185, 0.41814, 180deg);
        transform: translate3d(114px, -6px, -66px) rotate3d(0.81343, 0.74185, 0.41814, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-13 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(114px, -6px, -66px) rotate3d(0.81343, 0.74185, 0.41814, 180deg);
        transform: translate3d(114px, -6px, -66px) rotate3d(0.81343, 0.74185, 0.41814, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-14 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(29px, -29px, 77px) rotate3d(0.91415, 0.75526, 0.79838, 180deg);
        transform: translate3d(29px, -29px, 77px) rotate3d(0.91415, 0.75526, 0.79838, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-14 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(29px, -29px, 77px) rotate3d(0.91415, 0.75526, 0.79838, 180deg);
        transform: translate3d(29px, -29px, 77px) rotate3d(0.91415, 0.75526, 0.79838, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-14 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-32px, -25px, -99px) rotate3d(0.83368, 0.15258, 0.20296, 180deg);
        transform: translate3d(-32px, -25px, -99px) rotate3d(0.83368, 0.15258, 0.20296, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-14 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-32px, -25px, -99px) rotate3d(0.83368, 0.15258, 0.20296, 180deg);
        transform: translate3d(-32px, -25px, -99px) rotate3d(0.83368, 0.15258, 0.20296, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-15 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-119px, -91px, -109px) rotate3d(0.33223, 0.05812, 0.84915, 180deg);
        transform: translate3d(-119px, -91px, -109px) rotate3d(0.33223, 0.05812, 0.84915, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-15 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-119px, -91px, -109px) rotate3d(0.33223, 0.05812, 0.84915, 180deg);
        transform: translate3d(-119px, -91px, -109px) rotate3d(0.33223, 0.05812, 0.84915, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-15 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(19px, 87px, 91px) rotate3d(0.64083, 0.10309, 0.26926, 180deg);
        transform: translate3d(19px, 87px, 91px) rotate3d(0.64083, 0.10309, 0.26926, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-15 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(19px, 87px, 91px) rotate3d(0.64083, 0.10309, 0.26926, 180deg);
        transform: translate3d(19px, 87px, 91px) rotate3d(0.64083, 0.10309, 0.26926, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-16 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(11px, 31px, -126px) rotate3d(0.13307, 0.74162, 0.68171, 180deg);
        transform: translate3d(11px, 31px, -126px) rotate3d(0.13307, 0.74162, 0.68171, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-16 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(11px, 31px, -126px) rotate3d(0.13307, 0.74162, 0.68171, 180deg);
        transform: translate3d(11px, 31px, -126px) rotate3d(0.13307, 0.74162, 0.68171, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-16 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-93px, -27px, 72px) rotate3d(0.33155, 0.67682, 0.27272, 180deg);
        transform: translate3d(-93px, -27px, 72px) rotate3d(0.33155, 0.67682, 0.27272, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-16 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-93px, -27px, 72px) rotate3d(0.33155, 0.67682, 0.27272, 180deg);
        transform: translate3d(-93px, -27px, 72px) rotate3d(0.33155, 0.67682, 0.27272, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-17 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(59px, 45px, 60px) rotate3d(0.30355, 0.02224, 0.26806, 180deg);
        transform: translate3d(59px, 45px, 60px) rotate3d(0.30355, 0.02224, 0.26806, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-17 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(59px, 45px, 60px) rotate3d(0.30355, 0.02224, 0.26806, 180deg);
        transform: translate3d(59px, 45px, 60px) rotate3d(0.30355, 0.02224, 0.26806, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-17 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(3px, 33px, 113px) rotate3d(0.63954, 0.8555, 0.15867, 180deg);
        transform: translate3d(3px, 33px, 113px) rotate3d(0.63954, 0.8555, 0.15867, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-17 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(3px, 33px, 113px) rotate3d(0.63954, 0.8555, 0.15867, 180deg);
        transform: translate3d(3px, 33px, 113px) rotate3d(0.63954, 0.8555, 0.15867, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-18 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-121px, 34px, 17px) rotate3d(0.12688, 0.45587, 0.96248, 180deg);
        transform: translate3d(-121px, 34px, 17px) rotate3d(0.12688, 0.45587, 0.96248, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-18 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-121px, 34px, 17px) rotate3d(0.12688, 0.45587, 0.96248, 180deg);
        transform: translate3d(-121px, 34px, 17px) rotate3d(0.12688, 0.45587, 0.96248, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-18 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(84px, -22px, -33px) rotate3d(0.7626, 0.80896, 0.98333, 180deg);
        transform: translate3d(84px, -22px, -33px) rotate3d(0.7626, 0.80896, 0.98333, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-18 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(84px, -22px, -33px) rotate3d(0.7626, 0.80896, 0.98333, 180deg);
        transform: translate3d(84px, -22px, -33px) rotate3d(0.7626, 0.80896, 0.98333, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-19 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(90px, -73px, 107px) rotate3d(0.82643, 0.79244, 0.90723, 180deg);
        transform: translate3d(90px, -73px, 107px) rotate3d(0.82643, 0.79244, 0.90723, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-19 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(90px, -73px, 107px) rotate3d(0.82643, 0.79244, 0.90723, 180deg);
        transform: translate3d(90px, -73px, 107px) rotate3d(0.82643, 0.79244, 0.90723, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-19 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-127px, -119px, -48px) rotate3d(0.48431, 0.50718, 0.92412, 180deg);
        transform: translate3d(-127px, -119px, -48px) rotate3d(0.48431, 0.50718, 0.92412, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-19 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-127px, -119px, -48px) rotate3d(0.48431, 0.50718, 0.92412, 180deg);
        transform: translate3d(-127px, -119px, -48px) rotate3d(0.48431, 0.50718, 0.92412, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@-webkit-keyframes fade-in-20 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-39px, -131px, 28px) rotate3d(0.26079, 0.37146, 0.1743, 180deg);
        transform: translate3d(-39px, -131px, 28px) rotate3d(0.26079, 0.37146, 0.1743, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@keyframes fade-in-20 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-39px, -131px, 28px) rotate3d(0.26079, 0.37146, 0.1743, 180deg);
        transform: translate3d(-39px, -131px, 28px) rotate3d(0.26079, 0.37146, 0.1743, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
}
@-webkit-keyframes fade-out-20 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(31px, 147px, -41px) rotate3d(0.50998, 0.36395, 0.5275, 180deg);
        transform: translate3d(31px, 147px, -41px) rotate3d(0.50998, 0.36395, 0.5275, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}
@keyframes fade-out-20 {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-filter: unset;
        filter: unset;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(31px, 147px, -41px) rotate3d(0.50998, 0.36395, 0.5275, 180deg);
        transform: translate3d(31px, 147px, -41px) rotate3d(0.50998, 0.36395, 0.5275, 180deg);
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}

HTML

Random Text Component 用来制作文本分割相关的文本特效

react, 文本效果

编辑器支持Emmet

快捷键

Random Text Component 用来制作文本分割相关的文本特效

react, 文本效果

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

基于React实现的交互式BB-8机器人

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：