Алексей Назаренко

При помощи нативного метода animate, как-то так:

element.animate(
    [
        { transform: 'scale(1.25)', opacity: 1},
        { transform: 'scale(1)', opacity: 1, offset: 0.25 },
        { transform: 'scale(1.05)', opacity: 1, offset: 0.3}, 
        { transform: 'scale(0.85)', opacity: 0} 
    ],
    2000
);

Однако стоит обратить внимание, что это экспериментальное API и работает не во всех браузерах. Если нужна глубокая поддержка, то как вариант использовать jQuery animate

Webp вставляются как обычные картинки, но некоторые браузеры не поддерживают этот формат, поэтому стоит использовать специальный тег picture:

<picture>
    <source srcset="path/to/image.webp" type="image/webp">
    <img src="path/to/image.jpg" alt="Image alt">
</picture>

Если webp не отображается, могут быть следующие причины:

• неверный путь к файлу. В разметке, возможно, стоит путь в исходную папку, а не в папку со сконвертированными изображениями;
  
• браузер не поддерживает webp и нужен fallback, как показано выше;
  
• при конвертации что-то пошло не так и изображение битое после конвертации. Это маловероятно, но, тем не менее, такое может быть.