<div id="root"></div>
* {
  box-sizing: border-box;
}

body {
  background-color: #90f;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.box {
  background-color: #fff;
  width: 10rem;
  height: 10rem;
}

import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
import { motion } from "https://esm.sh/framer-motion";

function App() {
  return (
    <motion.div
      className="box"
      initial={{
        scale: 1,
        rotate: 0,
        borderRadius: 0,
        transition: { duration: 0 }
      }}
      whileHover={{
        scale: [1, 2, 2, 1, 1],
        rotate: [0, 0, 180, 180, 0],
        borderRadius: [0, 0, "50%", "50%", 0],
        transition: { duration: 2 }
      }}
    />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.