mostrar como deixar seus icones de redes sociais animados com css, mas voce pode aplicar o efeito a qualquer coisa que quiser em seu layout.Para fazer isso, nao vou usar imagem nenhuma, mas sim uma fonte de icones (tem quase todos que se possa imaginar) chamada FontAwesome, que mencionei nesse post, no tutorial do Helplogger. Se voce ja tem a fonte em seu template, beleza! Se nao, adicione-a abaixo de <head> no html do seu modelo.<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>Para usar os icones:<i class='fa fa-nomedoicone'/>Por exemplo, se quiser usar o icone do Facebook, mude nomedoicone para facebook; se quiser uma patinha, mude nomedoicone para paw... Aqui tem a lista de todos os icones que a fonte permite adicionar: icons.Mas precisamos primeiro incluir um estilo geral, para que o codigo acima va dentro da id que sera criada; vamos personalizar: cole isso onde quiser que os icones aparecam: <style>#fawesomeicons a {color: deeppink;display: inline-block;font-size: 20px;margin: 0 6px 6px;font-family: fontawesome;}#fawesomeicons a:hover{color: #fcc;}</style><center><div id='fawesomeicons'><a href='http://facebook.com/' title='Facebook'><i class='fa fa-facebook'/></a><a href='https://plus.google.com/' title='Google+'><i class='fa fa-google-plus'/></a><a href='https://twitter.com/' title='Twitter'><i class='fa fa-twitter'/></a><a href='http://weheartit.com/' title='Weheartit'><i class='fa fa-heart'/></a> </div></center> Substitua os links pelos seus. O resultado sera como na imagem abaixo:Agora, vamos animar! E possivel personalizar cada icone separadamente. O segredo esta no codigo que se coloca em hover, quando o mouse passa sobre o icone. Como exemplo, vou mostrar como apliquei o efeito bounce e pulse nos icones que uso atualmente. Cole antes de </style> do codigo anterior: #fawesomeicons a .fa-facebook { font-family:'FontAwesome'; background: deeppink; background-size: 100px; border-radius: 10px; padding: 5px 15px 5px 5px; color: white;}/*EFEITO BOUNCE*/#fawesomeicons a .fa-facebook:hover { -webkit-animation: bounce .9s 1; -moz-animation: bounce .9s 1; -o-animation: bounce .9s 1; animation: bounce .9s 1;}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom} Para aplicar em outro, repita o codigo trocando a palavra facebook pelo nome do icone que deseja animar.No coracao, apliquei o efeito pulse: #fawesomeicons a .fa-heart {color: red;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;}#fawesomeicons a .fa-heart:hover{-webkit-animation: smallToBig 300ms alternate infinite ease;-moz-animation: smallToBig 300ms alternate infinite ease;}@-webkit-keyframes smallToBig{from {-webkit-transform: scale(1);}to {-webkit-transform: scale(1.1);}}@-moz-keyframes smallToBig{from {-moz-transform: scale(1);}to {-moz-transform: scale(1.1);}} E pode aplicar mais efeitos que quiser, como esse (shake) e outros que postei pelo blog, lembra do menu de marshmallow? Fica super fofo. Bye!Imagem: Weheartit.com