How to create a hotspot, layer text with shake animation ?

I tried <cssstyles>
         .shake {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            animation: shake 0.5s ease-in-out infinite;
        }
        @keyframes shake {
            0% { transform: translate(0); }
            25% { transform: translate(-5px, 0); }
            50% { transform: translate(5px, 0); }
            75% { transform: translate(-5px, 0); }
            100% { transform: translate(0); }
        }
        </cssstyles>
   <layer type="text" keep="true" html="Upside Down" align="center" padding="8 16" cssclass="shake " />