How to create floating animation in HTML/CSS?

 Create floating animation in HTML/CSS.

.floating_x {

animation-name: floating_x;

animation-duration: 6s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes floating_x {

from {

transform: translate(0px, 0px)

}

65% {

transform: translate(15px, 0px)

}

to {

transform: translate(0px, 0px)

}

}

.floating_y {

animation-name: floating_y;

animation-duration: 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes floating_y {

from {

transform: translate(0px, 0px)

}

65% {

transform: translate(0px, -20px)

}

to {

transform: translate(0px, 0px)

}

}

.floating_y2 {

animation-name: floating_y2;

animation-duration: 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

animation-delay: 1s

}

@keyframes floating_y2 {

from {

transform: translate(0px, 0px)

}

50% {

transform: translate(0px, -20px)

}

to {

transform: translate(0px, 0px)

}

}

.floating_y3 {

animation-name: floating_y3;

animation-duration: 5s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out

}

@keyframes floating_y3 {

from {

transform: translate(0px, 0px)

}

65% {

transform: translate(0px, -20px)

}

to {

transform: translate(0px, 0px)

}

}

How to convert blob url into blob source code in jquery.

 Convert blob url into blob source code in jQuery

jQuery('.save_video_rec').click(function(){
        

        // blob url

        var videoblob = $('.j-video_result').attr('src');
        var blobUrl = videoblob;
        alert(blobUrl);
        var xhr = new XMLHttpRequest;
        xhr.responseType = 'blob';

        xhr.onl oad = function() {
        var recoveredBlob = xhr.response;

        var reader = new FileReader;

        reader.onl oad = function() {
         var blobAsDataUrl = reader.result;
        //  window.location = blobAsDataUrl;
        //    $('.audiovalue').val(blobAsDataUrl);
            alert(blobAsDataUrl);
        };

        reader.readAsDataURL(recoveredBlob);
        };

        xhr.open('GET', blobUrl);
        xhr.send();
        
    });