react-day-and-night-toggle
Version:
🌞Day & Night🌛 (light/dark) theme switch with pretty cool animation for React.
89 lines (88 loc) • 2.28 kB
JSX
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.cloudtravel3 = exports.cloudtravel2 = exports.cloudtravel1 = exports.growtrail = exports.shootingstartravel = exports.startravel3 = exports.startravel2 = exports.startravel1 = exports.growbrighter = void 0;
const styled_components_1 = require("styled-components");
exports.growbrighter = (0, styled_components_1.keyframes) `
0% {
box-shadow: 0 0 4px 0px rgb(255, 255, 255);
}
100% {
box-shadow: 0 0 15px 0px rgb(255, 255, 255);
}
`;
exports.startravel1 = (0, styled_components_1.keyframes) `
0% {
transform: rotate(65deg) translate(-80px) scale(1.0);
}
100% {
transform: rotate(-60deg) translate(-80px) scale(1.3);
}
`;
exports.startravel2 = (0, styled_components_1.keyframes) `
0% {
transform: rotate(27deg) translate(-160px) scale(1.6);
}
100% {
transform: rotate(-25deg) translate(-160px) scale(1.2);
}
`;
exports.startravel3 = (0, styled_components_1.keyframes) `
0% {
transform: rotate(22deg) translate(-200px) scale(1.2);
}
100% {
transform: rotate(-20deg) translate(-200px) scale(0.7);
}
`;
exports.shootingstartravel = (0, styled_components_1.keyframes) `
0% {
transform: translate(200px, -30px) rotate(-30deg);
}
8.33% {
transform: translate(-180px, 170px) rotate(-30deg);
}
100% {
transform: translate(-180px, 170px) rotate(-30deg);
}
`;
exports.growtrail = (0, styled_components_1.keyframes) `
0% {
width: 40px;
}
8.33% {
width: 180px;
}
100% {
width: 180px;
}
`;
exports.cloudtravel1 = (0, styled_components_1.keyframes) `
0% {
left: -80px;
transform: scale(1);
}
100% {
left: 330px;
transform: scale(0.8);
}
`;
exports.cloudtravel2 = (0, styled_components_1.keyframes) `
0% {
left: -90px;
transform: scale(0.6);
}
100% {
left: 330px;
transform: scale(1);
}
`;
exports.cloudtravel3 = (0, styled_components_1.keyframes) `
0% {
left: -100px;
transform: scale(0.7);
}
100% {
left: 340px;
transform: scale(0.65);
}
`;