0

Is it possible to create a html banner ad with inline css animations? I just need a div with my code that they will insert in their page, so the animation and styles need to be inline. i just need to animate an image of a button into the div so it looks like it's sliding in. I'm using relative positioning to layout the elements so far. Is this possible? Here is my code in the layout that I will need in the end. I need the div "button" to animate up from the bottom and land at bottom: 30px like it is now.

<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>
jessica mele
  • 417
  • 5
  • 20
  • Please share your code and I blieve you are not looking for someone to solve your assignment. Please refer this and edit the question: http://stackoverflow.com/help/how-to-ask – PseudoAj Dec 07 '16 at 21:25
  • I edited my question and shared my code, I just wanted to know if inline animations can be used. I'm not sure how to handle this without being able to reference a stylesheet. – jessica mele Dec 07 '16 at 21:42

3 Answers3

1

If you're using just HTML and inline CSS then the answer is no. Specifically, @keyframes can't be defined in inline styles. They can be defined in a <style> tag (as @Ryan Gee points out) but <style> tags have to be in the head, which rules it out for a banner ad.

Now, just to complicate things, at one point HTML5 introduced a scoped attribute that would let you use the <style> tag in the body, but support has since been dropped from most of the browsers.

If someone knows of an ingenious workaround I'd be very interested and impressed!

Dre
  • 2,933
  • 2
  • 18
  • 21
1

One option is to just use an animated .gif, if you're not depending on the user to click before the animation begins.

That way you wouldn't have all that overhead of html.

Another option would be, depending on their access on their host, to provide them with a fully qualified web page with the animation, that they can upload to their host. (Or, you can host the page)

Then, the div you provide along with the page, would contain an iframe that links to the web page, that renders the animation. This option might not be so responsive in terms of ui sizing.

nocturns2
  • 663
  • 10
  • 17
0

You could use the <style> tag, but it's not advisable. See here for an explanation.

Community
  • 1
  • 1
Ryan Gee
  • 394
  • 1
  • 9