Como hacer una animacion con keyframes sencilla para un boton

1891

Animación hover sencilla para un botón

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{
            display: flex;
            height: 100vh;
            width: 100%;
            justify-content: center;
            align-items: center;
        }
        button{
            border: 0;
            background-color: rgb(0, 204, 255);
            padding: 20px40px;
            font-size: 2rem;
            color: #fff;
            border-radius: 10px;
            transition: all 0.5s;
            cursor: pointer;
        }
        button:hover{
            animation: button-ani 1s;
            transition: all 0.5s;
        }
        @keyframes button-ani{
            0%{
                transform: translateX(0px);
                transition: all 0.5s;
            }
            100%{
                transform: translateX(20px);
                transition: all 0.5s;
            }
        }
    </style></head><body><divclass="container"><divclass="button-c"><button>Animación</button></div></div></body></html>```