javascript - 如何将“关键帧”css 应用于 React 组件中的特定类？

Question

我有一个名为ComingSoon. 这是我的 React 应用程序的其他组件的一个组件。

import React, { Component } from 'react';
import '../Styles/ComingSoon.css';

class ComingSoon extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <div>
                <div className="comingSoon-container">
                    <span className="comingSoon-text1">Coming</span>
                    <span className="comingSoon-text2">Soon</span>
                </div>
            </div>
        )
    }
}

export default ComingSoon;

这是该组件的我的 CSS 文件名ComingSoon.css：

.comingSoon-container {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.comingSoon-container span {
    text-transform: uppercase;
    display: block;
}

.comingSoon-text1 {
    color: black;
    font-size: 65px;
    font-weight: 700;
    letter-spacing: 12px;
    margin-bottom: 20px;
    background: white;
    position: relative;
    animation: text 3s 1;
}

.comingSoon-text2 {
    font-size: 50px;
    color: #2b8bc6;
}

@keyframes text {
    0% {
        color: white;
        margin-bottom: -60px;
    }
    30% {
        letter-spacing: 30px;
        margin-bottom: -60px;
    }
    85% {
        letter-spacing: 12px;
        margin-bottom: -60px;
    }
}

如何确保 CSS 样式@keyframes text不适用于我的应用程序的其他组件，而仅适用于具有 className 的内容的特定组件comingSoon-container。

标签： javascriptcssreactjs