How can I create a looped distortion effect on a selected picture in Webflow without any interaction on hover?

To create a looped distortion effect on a selected picture in Webflow without any interaction on hover, you can utilize CSS animations and the Transform property. Here's a step-by-step guide:

1. First, select the picture you want to apply the distortion effect to. You can do this by either using an Image element in Webflow or applying a background image to a specific section.

2. Give the picture a class name. You can do this by selecting the picture and navigating to the Element Settings panel on the right-hand side. In the Class field, enter a unique name for your class, such as "distortion-effect".

3. Now, head over to the Styles panel and select the class you just created. You'll have access to various CSS properties to style your picture.

4. To create the distortion effect, we'll be using CSS keyframe animations. Keyframe animations allow you to define specific styles at different points in time. Add the following custom code within the `