Skip to content

Instantly share code, notes, and snippets.

@ruucm
Last active December 29, 2021 06:00
Show Gist options
  • Save ruucm/36970fa002b5e4762f0c784ead5d9d3a to your computer and use it in GitHub Desktop.
Save ruucm/36970fa002b5e4762f0c784ead5d9d3a to your computer and use it in GitHub Desktop.
import React from "react";
const inEffect = `
@keyframes react-fade-in {
0% { opacity: 0.2; transform: translateX(100%); }
50% { opacity: 0.2; transform: translateX(50%); }
100% { opacity: 1; transform: translateX(0%); }
}
`;
function KeyFrames() {
return React.createElement("style", {}, inEffect);
}
function Box() {
return React.createElement(
"div",
{
style: {
background: "#005CFA",
color: "white",
borderRadius: "8px",
width: "100px",
height: "100px",
display: "flex",
justifyContent: "center",
alignItems: "center",
animation: "2s ease-in infinite react-fade-in"
}
},
"Box"
);
}
export function TestComponent() {
return React.createElement("div", {}, [KeyFrames(), Box()]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment