Keyframe Animations

1
2<motion.div
3  className="bg-gray-400 w-24 h-24"
4  animate={{
5    scale: [1, 2, 1, 1],
6    rotate: [0, 0, 180, 180, 0],
7  }}
8  transition={{ duration: 2, repeat: Infinity }}
9>
10</motion.div>
11

1
2<motion.div
3  className="bg-gray-400 w-24 h-24"
4  animate={{
5    scale: [1, 2, 1, 1],
6    rotate: [0, 0, 180, 180, 0],
7    borderRadius: ['0%', '0%', '50%', '50%', '0%'],
8  }}
9  transition={{
10    duration: 2,
11    repeat: Infinity,
12    repeatDelay: 1,
13    times: [0, 0.15, 0.75, 0.85, 1],//times can change the ease
14  }}
15></motion.div>
16            

1
2<motion.div
3  className="bg-gray-400 w-24 h-24"
4  animate={{
5    scale: [1, 2, 1, 1],
6    rotate: [0, 0, 180, 180, 0],
7    borderRadius: ['0%', '0%', '50%', '50%', '0%'],
8    backgroundColor: ['#ff0000', '#00ff00', '#0000ff', '#ff0000'],
9  }}
10  transition={{
11    duration: 2.5,
12    repeat: Infinity,
13    repeatDelay: 1,
14  }}
15></motion.div>
16            

1
2<motion.div
3  className="bg-gray-400 w-24 h-24"
4  animate={{
5    x: [-200, 0, 200, 0, -200],
6    rotate: [0, 180, 0, -180, 0],
7    borderRadius: ['0%', '50%', '0%', '50%', '0%'],
8    backgroundColor: ['#ff0000', '#00ff00', '#0000ff', '#ff0000'],
9  }}
10  transition={{
11    duration: 2.5,
12    repeat: Infinity,
13    repeatDelay: 1,
14    repeatType: 'reverse',
15  }}
16  
17></motion.div>
18