How to Create Keyframe Animations (Keyframes)

In the current version, it is possible to animate only a custom code component using animation and keyframes.

Here’s a step-by-step guide to applying rotating animation to an element:

Create a code component. Click on the + button in the Project section of the Components tab.
Import dependencies from styled-components into the component:
import MyComponent from "./MyComponent";
Create a rotate variable with keyframes and styles:
const rotate = keyframes`
0% {
transform: rotate(0deg);
background-color: #ff4400;
}
50% {
transform: rotate(180deg);
background-color: #000000;
}
100% {
transform: rotate(360deg);
background-color: #ff4400;
}
`;
Create a component using styled-components:
const Rotate = styled.div`
display: inline-block;
padding: 2rem 1rem;
border-radius: 10px;
font-size: 1.2rem;
background: red;
`;
Add the animation property to the rotate variable:
const Rotate = styled.div`
animation: ${rotate} 2s linear infinite;
display: inline-block;
padding: 2rem 1rem;
border-radius: 10px;
font-size: 1.2rem;
background: red;
`;

Here’s the whole component code:

import atomize from "@quarkly/atomize";

// Import the keyframes
import styled, { keyframes } from "styled-components";

// Create the keyframes
const rotate = keyframes`
  0% {
    transform: rotate(0deg);
    background-color: #ff4400;
  }
  50% {
    transform: rotate(180deg);
    background-color: #000000;
  }
  100% {
    transform: rotate(360deg);
    background-color: #ff4400;
  }
`;

// Here we create a component that will rotate everything we with an interval of 2 seconds
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  border-radius: 10px;
  font-size: 1.2rem;
  background: red;
`;

export default atomize(Rotate)({
  name: "Rotate Animation",
  effects: {
    hover: ":hover",
  },
  normalize: true,
  mixins: true,
  description: {
    // paste here the description for your component
    en: "Rotate Animation Component",
  },
  propInfo: {
    // paste here the props description for your component
    yourCustomProps: {
      control: "input",
    },
  },
});