CSS - Animate only selected elements svg

Question

I am trying to animate some elements of an image in svg. To test the animation I first tried to insert in the svg only the element to animate in order to see if the animation works well, it is the case, here is the code : HTML :

<svg xmlns="http://www.w3.org/2000/svg" width="244" height="149.388" viewBox="-15 -320 244 149.388">
               <g id="off" transform="translate(-1090, -390)">
                   <g transform="translate(-28.904 -320.214)" >
                       <path id="note-double-1" d="M1114.926,434.328l5.138-22.688,22.647,1.41c-.05.226-.093.412-.133.6q-2.918,12.882-5.824,25.761a5.089,5.089,0,0,1-3.018,3.727,7.907,7.907,0,0,1-9.016-2.153c-2.277-2.776-1.476-6.41,1.8-7.774a7.7,7.7,0,0,1,8.184,1.341c.1.083.205.172.31.245h.067l3.237-14.3c-1.28-.081-2.527-.164-3.772-.245-4.355-.272-8.713-.535-13.066-.821-.412-.029-.524.113-.61.49-1.4,6.229-2.861,12.445-4.2,18.686a5.393,5.393,0,0,1-4.558,4.48,7.783,7.783,0,0,1-8.129-3.455,4.664,4.664,0,0,1,1.414-6.408,7.077,7.077,0,0,1,6.186-.777,8.54,8.54,0,0,1,1.767.758A17.8,17.8,0,0,1,1114.926,434.328Z"/>
                   </g>
               </g>
           </svg>

CSS :

#note-double-1 {
    /*overflow: hidden;*/
    transform: translateY(0px);
    animation: float 6s ease-in-out infinite;
}
 
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

But, when I add all the extra 'path' lines in the svg tag, nothing is displayed. To avoid too long message, here is a jsfiddle link : https://jsfiddle.net/qsxjwm0u/2/ Thanks for your help, Have a nice evening