myesn/animate-on-hover.html

## animate-on-hover.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(459.6px, 1fr));
            gap: 3px;
            max-width: 1444px;
            margin: auto;
        }

        .card {
            color: #3b4145;
            padding: 28px;
            background-color: #d6d9dc;
        }

        .card .card-content-container {
            opacity: 0;
        }

        .card .card-content-container .card-more {
            margin-top: 54px;
        }

        .card:hover {
            background-color: #d76789 !important;
            cursor: pointer;
        }

        .card:hover .card-time {
            animation: fadeOutUp;
            /* referring directly to the animation's @keyframe declaration */
            animation-duration: var(--animate-duration);
            /* don't forget to set a duration! */
            animation-fill-mode: both;
        }

        .card:hover .card-title {
            margin-top: -54px;
            animation: fadeInUp;
            /* referring directly to the animation's @keyframe declaration */
            animation-duration: var(--animate-duration);
            /* don't forget to set a duration! */
            animation-fill-mode: both;
        }

        .card:hover .card-content-container {
            animation: fadeIn;
            animation-duration: var(--animate-duration);
            /* don't forget to set a duration! */
            animation-fill-mode: both;
        }

        .card:hover .card-more {
            animation: fadeInDown;
            /* referring directly to the animation's @keyframe declaration */
            animation-duration: var(--animate-duration);
            /* don't forget to set a duration! */
            animation-fill-mode: both;
        }

        .card:hover .card-plus-icon {
            animation: fadeOutDown;
            /* referring directly to the animation's @keyframe declaration */
            animation-duration: var(--animate-duration);
            /* don't forget to set a duration! */
            animation-fill-mode: both;
        }

        .animate-margin-top {
            /* 设置初始的 margin-top */
            margin-top: 10px;
            /* 设置 transition 属性 */
            transition: margin-top 0.5s ease-in-out;
        }


        /* 鼠标悬浮时改变 margin-top */
        .animate-margin-top:hover {
            margin-top: 20px;
            /* 可以设置任何你想要的值 */
        }
    </style>
</head>

<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        function Card() {
            return (
                <div className="card">
                    <h4 className="card-time"
                    >
                        2024年5月1号
                    </h4>
                    <h1 className="card-title">title</h1>
                    <div className="card-content-container">
                        <div>content</div>
                        <div className="card-more">
                            more
                            <span className="right-arrow">{'>'}</span>
                        </div>
                    </div>
                    <div className="card-plus-icon">+</div>
                </div>
            )
        }

        function CardListContainer({ cards }) {
            return (
                <div className="container">
                    {cards.map((card, index) => <Card key={index} />)}
                </div>
            )
        }

        function AnimateMarginTop() {
            return <div className="animate-margin-top">1</div>
        }

        function MyApp() {
            const cards = Array.from({ length: 9 });

            return <>
                <AnimateMarginTop />

                <CardListContainer cards={cards} />
            </>;
        }

        const container = document.getElementById('root');
        const root = ReactDOM.createRoot(container);
        root.render(<MyApp />);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
	<style>
	.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(459.6px, 1fr));
	gap: 3px;
	max-width: 1444px;
	margin: auto;
	}

	.card {
	color: #3b4145;
	padding: 28px;
	background-color: #d6d9dc;
	}

	.card .card-content-container {
	opacity: 0;
	}

	.card .card-content-container .card-more {
	margin-top: 54px;
	}

	.card:hover {
	background-color: #d76789 !important;
	cursor: pointer;
	}

	.card:hover .card-time {
	animation: fadeOutUp;
	/* referring directly to the animation's @keyframe declaration */
	animation-duration: var(--animate-duration);
	/* don't forget to set a duration! */
	animation-fill-mode: both;
	}

	.card:hover .card-title {
	margin-top: -54px;
	animation: fadeInUp;
	/* referring directly to the animation's @keyframe declaration */
	animation-duration: var(--animate-duration);
	/* don't forget to set a duration! */
	animation-fill-mode: both;
	}

	.card:hover .card-content-container {
	animation: fadeIn;
	animation-duration: var(--animate-duration);
	/* don't forget to set a duration! */
	animation-fill-mode: both;
	}

	.card:hover .card-more {
	animation: fadeInDown;
	/* referring directly to the animation's @keyframe declaration */
	animation-duration: var(--animate-duration);
	/* don't forget to set a duration! */
	animation-fill-mode: both;
	}

	.card:hover .card-plus-icon {
	animation: fadeOutDown;
	/* referring directly to the animation's @keyframe declaration */
	animation-duration: var(--animate-duration);
	/* don't forget to set a duration! */
	animation-fill-mode: both;
	}

	.animate-margin-top {
	/* 设置初始的 margin-top */
	margin-top: 10px;
	/* 设置 transition 属性 */
	transition: margin-top 0.5s ease-in-out;
	}


	/* 鼠标悬浮时改变 margin-top */
	.animate-margin-top:hover {
	margin-top: 20px;
	/* 可以设置任何你想要的值 */
	}
	</style>
	</head>

	<body>
	<div id="root"></div>

	<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

	<!-- Don't use this in production: -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

	<script type="text/babel">
	function Card() {
	return (
	<div className="card">
	<h4 className="card-time"
	>
	2024年5月1号
	</h4>
	<h1 className="card-title">title</h1>
	<div className="card-content-container">
	<div>content</div>
	<div className="card-more">
	more
	<span className="right-arrow">{'>'}</span>
	</div>
	</div>
	<div className="card-plus-icon">+</div>
	</div>
	)
	}

	function CardListContainer({ cards }) {
	return (
	<div className="container">
	{cards.map((card, index) => <Card key={index} />)}
	</div>
	)
	}

	function AnimateMarginTop() {
	return <div className="animate-margin-top">1</div>
	}

	function MyApp() {
	const cards = Array.from({ length: 9 });

	return <>
	<AnimateMarginTop />

	<CardListContainer cards={cards} />
	</>;
	}

	const container = document.getElementById('root');
	const root = ReactDOM.createRoot(container);
	root.render(<MyApp />);
	</script>
	</body>

	</html>