Animeren met CSS 3 is erg leuk om te doen. Ik pas het daarom steeds vaker toe in projecten. Onlangs heb ik voor een project bubbels geanimeerd. In deze blog laat ik zien hoe ik dat gedaan heb.
Allereerst maken we met CSS 3 een eenvoudige bubbel. Hiervoor maken we gebruik van border-radius en de background gradiënt.
.bubble {
background: -webkit-gradient(linear, 0% 100%, 0% 100%, from(#89D0ED), to(#E4F7FF));
-webkit-border-radius: 30px;
border: 1px solid #89D0ED;
position: absolute;
left: 0;
bottombottom: 0;
width: 60px;
height: 60px;
}
Wil je wat meer detail, dan kan je uiteraard ook gewoon een transparante PNG afbeelding gebruiken.
De volgende stap is om deze bubbel in beweging te brengen. Met de WebKit is dit redelijk eenvoudig te realiseren. Allereerst geven we de animatie een naam en bepalen we de duur van de animatie. Voeg de volgende CSS toe aan de bubble class.
.bubble {
-webkit-animation: animate 4s linear;
-webkit-animation-iteration-count: infinite;
}
De animatie zou straks als volgt moeten werken. De bubbel moet van onder naar boven bewegen (translate), begint klein en wordt steeds groter (scale) en fade langzaam in en uit (opacity). Om dit resultaat te bereiken zou je onderstaande code kunnen gebruiken.
@-webkit-keyframes animate {
0% { -webkit-transform: translate(0,0) scale(0.2); opacity: 0; }
75% { -webkit-transform :translate(0,-200px) scale(1.0); opacity: 1; }
100% { -webkit-transform :translate(0,-210px); opacity: 0; }
}
Door vervolgens meerdere bubbels op verschillende posities en verschillende groottes te tonen kan je een realistisch bubbel effect creëren. Bekijk hier het uiteindelijke resultaat. Let op, dit werkt alleen in een WebKit brower zoals Google Chrome. Mocht je meer willen weten over interessante ontwikkelingen op het gebied van CSS3, laat even een reactie achter. Ik vertel je er graag meer over.