Coin flip animation. Demo https://play.tailwindcss.com/3YutjlW4Gr

coin-flip.html

<div class="flex h-screen w-full items-center justify-center overflow-hidden bg-gray-900 group">
  <div class="aspect-square w-72 overflow-hidden rounded-full bg-coin-head group-hover:animate-coin-flip"></div>
</div>

tailwin.config.js

const head =
  'https://github.githubassets.com/images/modules/profile/achievements/pull-shark-default.png'
const tail =
  'https://github.githubassets.com/images/modules/profile/achievements/pull-shark-bronze.png'
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'coin-head': `url("${head}")`,
        'coin-tail': `url("${tail}")`,
      },
      animation: {
        'coin-flip': 'coin-flip 1s',
      },
      keyframes: {
        'coin-flip': {
          '0%': {
            'background-image': `url("${head}")`,
            transform: 'scaleX(1)',
            'animation-timing-function': 'ease-in',
          },
          '15%': {
            'background-image': `url("${head}")`,
            transform: 'scaleX(0)',
            'animation-timing-function': 'ease-out',
          },
//           '16%': {
//             'background-image': `url("${tail}")`,
//           },
          '35%': {
            'background-image': `url("${tail}")`,
            transform: 'scaleX(1)',
            'animation-timing-function': 'ease-in',
          },
//           '59%': {
//             'background-image': `url("${tail}")`,
//           },
          '60%': {
            'background-image': `url("${head}")`,
            transform: 'scaleX(0)',
            'animation-timing-function': 'ease-out',
          },
          '100%': {
            transform: 'scaleX(1)',
          },
        },
      },
    },
  },
  plugins: [],
}