Animar Logo HTML5

[Dexter Morgan 7]

Boa noite, estou tentando fazer uma animação na logo com HTML5 porem nao consegui o desejado, acho que com HTML5 tem como só nao estou conseguindo:

 

quero que quando abrir o site apareça o P porém sem a raiz, e a raiz aparecer com uma anição em slow motion, porem nao consegui fazer isso, talvez em HTML5 nao tenha como, mas se alguém souber, agradeço.

[Electronic 124]

Isso?

transition

<div>
  <img src="http://oi59.tinypic.com/351hdgw.jpg" alt="" />
</div>

div {
  width: 300px;
  margin: auto;
  height: 160px;
  overflow: hidden;
  transition: height 2s;
}
img {
  width: inherit;
}
div:hover {
  height: 350px
}

http://codepen.io/anon/pen/yYLQyj?editors=110

[Dexter Morgan 7]

É isso mesmo Electronic, só que assim, eu queria que ela carregasse com esse efeito sem precisar passar o mouse, após 10 segundos da pagina estar aberta; tem como fazer isso ?

[Electronic 124]

usa JS

setTimeout

http://www.w3schools.com/jsref/met_win_settimeout.asp

e

object.style.height = valor

[Dexter Morgan 7]

Valeu pela ajuda Electronic consegui fazer dessa forma, utilizando seu primeiro exemplo:

<style>
div{
	width:300px;
	margin:auto;
	height:155px;
	overflow:hidden;
}

img{
	width:inherit;
}

@keyframes height{
0%{
	height:155px;
}

100%{
	height:350px;
}
}

div{
	height:350px;
	-webkit-animation:height 8s;
	-moz-animation:height 8s;
	-ms-animation:height 8s;
	-o-animation:height 8s;
	animation:height 8s;
}
</style>

<div><img src="http://oi59.tinypic.com/351hdgw.jpg" /></div>

;)