Dexter Morgan 7 Denunciar post Postado Setembro 1, 2015 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. Compartilhar este post Link para o post Compartilhar em outros sites
Electronic 124 Denunciar post Postado Setembro 2, 2015 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 Compartilhar este post Link para o post Compartilhar em outros sites
Dexter Morgan 7 Denunciar post Postado Setembro 2, 2015 É 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 ? Compartilhar este post Link para o post Compartilhar em outros sites
Electronic 124 Denunciar post Postado Setembro 2, 2015 usa JS setTimeout http://www.w3schools.com/jsref/met_win_settimeout.asp e object.style.height = valor Compartilhar este post Link para o post Compartilhar em outros sites
Dexter Morgan 7 Denunciar post Postado Setembro 2, 2015 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> ;) Compartilhar este post Link para o post Compartilhar em outros sites