CSS animation - floating image with keyframes

Question

img {
    &.v--dot {
        width: 91px !important;
        height: auto;
        // animation: indicator-floating 1.5s linear .3s infinite;
        animation-name: dot-floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        margin-left: 30px;
        margin-top: 5px;
        @keyframes dot-floating {
            0% { transform: translate(0,  0px); }
            50%  { transform: translate(0, 15px); }
            100%   { transform: translate(0, -0px); }    
        }
    }  
}