Создание баннерного объявления html с встроенной анимацией css

Question

Возможно ли создать баннерное объявление html с встроенными анимациями css? Мне просто нужен div с моим кодом, который они будут вставлять на свою страницу, поэтому анимация и стили должны быть встроенными. мне просто нужно одушевить изображение кнопки в div, так что похоже, что он скользит. Я использую относительное позиционирование для компоновки элементов до сих пор. Это возможно? Вот мой код в макете, который мне понадобится в конце. Мне нужна кнопка «div» для анимации вверх и вниз внизу: 30px, как сейчас.

<div style="width:160px; height:600px; text-align:center; position: relative;"> 
<a href="" target=_blank"><img src="images/Agent-Ad_Crush-160x600_b_110716.jpg" alt="Broadview Networks Generate New Leads And Crush The End Of The Year!" width="160" height="600" border="0" /></a> 
<div class="words" alt="" width="160" height="180"style="position: absolute; bottom: 150px; left: 11px;"> 
<img src="images/Agent-Ad_Crush-160x600_b_110716-words.jpg"> 
</div> 
<div class="button" alt="" width="116" height="32"style="position: absolute; bottom: 30px; left: 22px;"> 
<img src="images/Agent-Ad_Crush-160x600_b_110716-button.jpg">  
</div> 
</div> 

Answer 1

Если вы используете только HTML и встроенный CSS, тогда ответ будет отрицательным. В частности, @keyframes не может быть определен в встроенных стилях. Они могут быть определены в теге <style> (так как @Ryan Gee указывает) но<style> теги должны быть в голове, что исключает его для объявления баннера.

Теперь, только усложнять, в одной точке HTML5 представила scoped attribute, что бы позволяют использовать <style> тега в теле, но поддержка имеет since been dropped from most of the browsers.

Если кто-то знает о гениальном обходном я бы быть очень заинтересованы и впечатлены!

Answer 2

Вы можете использовать тег <style>, но это не рекомендуется. См. here для объяснения.

Answer 3

Один из вариантов - просто использовать анимированный .gif, если вы не зависите от пользователя, который должен щелкнуть перед началом анимации.

Таким образом, у вас не было бы всего этого накладного расхода html.

Другим вариантом будет, в зависимости от их доступа на своем хосте, предоставить им полную веб-страницу с анимацией, которую они могут загрузить на свой компьютер. (Или вы можете разместить эту страницу)

Затем div, который вы предоставляете вместе со страницей, будет содержать iframe, который ссылается на веб-страницу, которая отображает анимацию. Этот параметр может быть не столь отзывчивым с точки зрения размера.