How to make animation of Titlel logo?

web titel logo!

html formatting

13th Jul 2017, 4:21 PM

Paran Boruah

8 Respostas

+ 5

@visph, .jpg, .png and .gif images are not text so cannot be used as title only the .ico can be used

14th Jul 2017, 6:12 AM

Nomeh Uchenna Gabriel

+ 4

You cannot animate the <title> (.ico) logo since its not in the document. it's in the head.

13th Jul 2017, 6:19 PM

Nomeh Uchenna Gabriel

+ 3

What kind of animation? Have you already code showing the static title/logo?

13th Jul 2017, 4:23 PM

visph

+ 3

Use css 'transform' property with value 'rotate(ndeg)' value, combined with 'animation' property and '@keyframes' definition: <img id="logo" src="url" alt="description" width="50" height="50"> <style> #logo { background:red; animation-name:anim; animation-duration:10s; animation-iteration-count:infinite; animation-timing-function:linear; } @keyframes anim { from { transform:rotate(0deg); } 50% { transform:rotate(180deg); } to { transform:rotate(360deg); } } </style> background and image size are added to test the code without valid src provided... The line with 50% is unnecessary in this case, but I put it for teaching purpose: you can add how many time key to the definition ;) Anyway, you need to provide version of property with vendors prefix, to support some browsers/versions ^^

13th Jul 2017, 4:50 PM

visph

+ 2

If you was talking about the <title> tag of you html document, as suggested by @Nomeh Uchenna Gabriel, and more precisely the named 'favicon' (favorite icon), you can only animate it by using an animated gif as image... my previous solution was for animating a content title logo, not the <title> tag of <head> section ;P

14th Jul 2017, 4:57 AM

visph

+ 2

@Gabriel: I was talking about the favicon of a page/site, which stand left side of title tab/window wich can be the << title logo >> meaning of @Paran Boruah...

14th Jul 2017, 6:20 AM

visph

like rotation!

13th Jul 2017, 4:26 PM

Paran Boruah

my title logo is png file.

13th Jul 2017, 4:27 PM

Paran Boruah