Colocando animações em CSS com Transitions

No CSS damos vida a divs e objetos, um exemplo é uma div comum, que mudar a cor ao passar o mouse sobre ela. Porém isso acontece sem nenhuma suavidade, por isso é que existe a propriedade transition.

Veja abaixo um exemplo, onde a imagem mudar sua opacidade (clique aqui e aprenda a criar uma opacidade) ao passar o mouse:

Código:

<style> .efeito img{ opacity: 0.6; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .efeito img:hover{ opacity:1.0; } </style> <div class="efeito"><img src="https://3.bp.blogspot.com/-veOjkugpruE/VbWFy6EtMvI/AAAAAAAADrE/XCT78Yp1cVI/s1600/css2.png"> </div>

O grande segredo é o transition. Você também pode mudar o tempo na parte na parte 0.3s. Também é importante observar que existem vários transitions diferentes, isso é para que funcione normalmente em navegadores diferentes.

Não se esqueça de comentar! ;)