A square is being animated
<motion.div
className="bg-gray-400 w-24 h-24"
animate={{
scale: [1, 2, 1, 1],
rotate: [0, 0, 180, 180, 0],
}}
transition={{ duration: 2, repeat: Infinity }}
>
</motion.div>
A square is being animated
<motion.div
className="bg-gray-400 w-24 h-24"
animate={{
scale: [1, 2, 1, 1],
rotate: [0, 0, 180, 180, 0],
borderRadius: ['0%', '0%', '50%', '50%', '0%'],
}}
transition={{
duration: 2,
repeat: Infinity,
repeatDelay: 1,
times: [0, 0.15, 0.75, 0.85, 1],//times can change the ease
}}
></motion.div>
A square is being animated
<motion.div
className="bg-gray-400 w-24 h-24"
animate={{
scale: [1, 2, 1, 1],
rotate: [0, 0, 180, 180, 0],
borderRadius: ['0%', '0%', '50%', '50%', '0%'],
backgroundColor: ['#ff0000', '#00ff00', '#0000ff', '#ff0000'],
}}
transition={{
duration: 2.5,
repeat: Infinity,
repeatDelay: 1,
}}
></motion.div>
A square is being animated
<motion.div
className="bg-gray-400 w-24 h-24"
animate={{
x: [-200, 0, 200, 0, -200],
rotate: [0, 180, 0, -180, 0],
borderRadius: ['0%', '50%', '0%', '50%', '0%'],
backgroundColor: ['#ff0000', '#00ff00', '#0000ff', '#ff0000'],
}}
transition={{
duration: 2.5,
repeat: Infinity,
repeatDelay: 1,
repeatType: 'reverse',
}}
></motion.div>
Read about animation form Docs By Motion
Link to Docs Motion's Animate