Как сделать постоянную анимация картинки? [РЕШЕНО]

[stedivid]

Как сделать постоянную анимацию картинки? К примеру как на кнопке ( Получить каталог) https://paradigma.website/onescreen/etalon/
анимацию покачивание или пульсация?

[SuperBatya]

Если анимация на кнопке, то Кирилл (Gudwinn) сбрасывал свое творение - бесплатное расширение "Кнопка со спецэффектами" (http://shop.wysiwygwebbuilder.ru/index. ... duct_id=98)
А если анимация иконки, то вставляем иконку из шрифта или другое изображение, далее... Свойства объекта-->CSS3 анимация-->Анимации и добавляем анимацию с названием "jello-horizontal"...

[MasterOfPuppets]

Дык, сайт в Вашем примере на билдере сделан :) Ставите кнопку (либо расширение Кнопка от Гудвина), поверх кнопки ставите иконку с каталогом, а в особом стиле иконки пишите вот это:
animation: jello-horizontal 1500ms linear 0ms infinite normal both;

Ну или просто анимируете иконку стандартными способами.

[stedivid]

Я выделил картинку , зашел в HTML, и вставил в особый стиль animation: jello-horizontal 1500ms linear 0ms infinite normal both; не работает через особый стиль
или я не так вставляю может нужно что то дописать типа class=""? Кнопку с эффектами я умею делать. Подскажите как сделать анимацию картинки -что бы она постоянно двигалась?

[MasterOfPuppets]

Значит сделайте как сказал СуперБатя)

[Gudwinn]

stedivid, Привет, значит вот этот код вставляете в особый стиль картинки

Код: Выделить всё

-webkit-animation: jello-horizontal 1500ms linear 0ms infinite normal both;
    -moz-animation: jello-horizontal 1500ms linear 0ms infinite normal both;
    animation: jello-horizontal 1500ms linear 0ms infinite normal both;

, а вот этот код, в исходнике страницы, в HEAD

Код: Выделить всё

<style>
@-webkit-keyframes jello-horizontal
{
   0% { -webkit-transform: rotateX(0deg) ;  }
   30% { -webkit-transform: rotateX(0deg) scale3d(1.25,0.75,1.0) ;  }
   40% { -webkit-transform: rotateX(0deg) scale3d(0.75,1.25,1.0) ;  }
   50% { -webkit-transform: rotateX(0deg) scale3d(1.15,0.85,1.0) ;  }
   65% { -webkit-transform: rotateX(0deg) scale3d(0.95,1.05,1.0) ;  }
   75% { -webkit-transform: rotateX(0deg) scale3d(1.05,0.95,1.0) ;  }
   100% { -webkit-transform: rotateX(0deg) scale3d(1.0,1.0,1.0) ;  }
}
@-moz-keyframes jello-horizontal
{
   0% { -moz-transform: rotateX(0deg) ;  }
   30% { -moz-transform: rotateX(0deg) scale3d(1.25,0.75,1.0) ;  }
   40% { -moz-transform: rotateX(0deg) scale3d(0.75,1.25,1.0) ;  }
   50% { -moz-transform: rotateX(0deg) scale3d(1.15,0.85,1.0) ;  }
   65% { -moz-transform: rotateX(0deg) scale3d(0.95,1.05,1.0) ;  }
   75% { -moz-transform: rotateX(0deg) scale3d(1.05,0.95,1.0) ;  }
   100% { -moz-transform: rotateX(0deg) scale3d(1.0,1.0,1.0) ;  }
}
@-o-keyframes jello-horizontal
{
   0% { -o-transform: rotateX(0deg) ;  }
   30% { -o-transform: rotateX(0deg) scale3d(1.25,0.75,1.0) ;  }
   40% { -o-transform: rotateX(0deg) scale3d(0.75,1.25,1.0) ;  }
   50% { -o-transform: rotateX(0deg) scale3d(1.15,0.85,1.0) ;  }
   65% { -o-transform: rotateX(0deg) scale3d(0.95,1.05,1.0) ;  }
   75% { -o-transform: rotateX(0deg) scale3d(1.05,0.95,1.0) ;  }
   100% { -o-transform: rotateX(0deg) scale3d(1.0,1.0,1.0) ;  }
}
@-ms-keyframes jello-horizontal
{
   0% { -ms-transform: rotateX(0deg) ;  }
   30% { -ms-transform: rotateX(0deg) scale3d(1.25,0.75,1.0) ;  }
   40% { -ms-transform: rotateX(0deg) scale3d(0.75,1.25,1.0) ;  }
   50% { -ms-transform: rotateX(0deg) scale3d(1.15,0.85,1.0) ;  }
   65% { -ms-transform: rotateX(0deg) scale3d(0.95,1.05,1.0) ;  }
   75% { -ms-transform: rotateX(0deg) scale3d(1.05,0.95,1.0) ;  }
   100% { -ms-transform: rotateX(0deg) scale3d(1.0,1.0,1.0) ;  }
}
@keyframes jello-horizontal
{
   0% { transform: rotateX(0deg) ;  }
   30% { transform: rotateX(0deg) scale3d(1.25,0.75,1.0) ;  }
   40% { transform: rotateX(0deg) scale3d(0.75,1.25,1.0) ;  }
   50% { transform: rotateX(0deg) scale3d(1.15,0.85,1.0) ;  }
   65% { transform: rotateX(0deg) scale3d(0.95,1.05,1.0) ;  }
   75% { transform: rotateX(0deg) scale3d(1.05,0.95,1.0) ;  }
   100% { transform: rotateX(0deg) scale3d(1.0,1.0,1.0) ;  }
}
</style>


, вот собственно и всё

[stedivid]

БОЛЬШОЕ СПАСИБО!

[stedivid]

Помогло решение что бы пользоваться родной анимацией программы. переустановил прогу и все заработало.
Большое спасибо всем что не бросили в беде