import { keyframes } from 'styled-components'; export * from './Container'; export * from './Flex'; export * from './FloatingImage'; export * from './Icon'; // TOOD: Convert all to a single framework // Animations, others are AOS and Framer Motion export const rotate = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } `; export const rotateAndColor = keyframes` 0%{ /* filter: hue-rotate(0deg); */ transform: rotate(0deg); } 100%{ /* filter: hue-rotate(360deg); */ transform: rotate(360deg); } `; export const fadein = keyframes` from { opacity: 0; transform: translateX(-10px) translateY(-10px); } to { opacity: 1; transform: translateX(10px) translateY(10px); } `; export const windmove = keyframes` from { transform: rotateX(0deg) ; } to { transform: rotateX(5deg) ; } `;