Pulsierendes Div erstellen ohne Javascript

Ein Button wird nicht immer sofort erkannt oder man möchte einfach ein Element auf der Webseite schön animieren. Egal für welchen Anwendungszweck – Durch ein pulsierendes Div oder ein pulsierender Button wird die Aufmerksamkeit unweigerlich zu dieser Position auf dem Bildschirm gelenkt, denn Bewegung zieht unsere Aufmerksamkeit auf sich. Weitere schöne CSS Buttons Ideen.

Pulsierende div Animation – Beispiel

Im Folgenden finden Sie ein Beispiel für eine pulsierende Animation eines Div:

  • HTML
  • CSS
HTML
									<div class="puls-container">
	<div class="puls-middle"></div>
	<div class="puls"></div>
</div>
								
CSS
									div.puls-container {
	width: 100%;
	height: 60px;
	position: relative;
	display: table;
	margin: 50px auto;	
}
div.puls {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border: 2px solid #5dd39e;
	display: table;
	background: transparent;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -15px 0 0 -15px;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 0.0;
}
@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(3.2, 3.2); opacity: 0.0;}
}
div.puls-middle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	background: #ff1654;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px 0 0 -10px;
	z-index: 99;
}
								

Sicherlich – Nicht jeder mag das. Das sollte einem klar sein. Daher empfehle ich auch immer nur eine dezente Verwendung dieser Animation – ebenso SVG Animationen. Nicht das man ein Button wie blinken lässt, denn das schreckt eher ab. Eine angemessene Dosis und der Effekt erzielt seine Wirkung.

Das schöne ist, dass für den Effekt kein Javascript notwendig ist. Einfach folgende Zeile in die .css Datei packen und anpassen.

css
				yourClass {
	width: 14px;
	height: 14px;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border: 2px solid #ffaf04;
	display: block;
	position: absolute;
	left: -4px;
	top: -4px;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 0.0
}
@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
			
Mehr anzeigen

1 Kommentar

Schreibe ein Kommentar zu Pulsierendes Div erstellen ohne Javascript

  1. avatar andreasAndreas sagt:

    Vielen Dank!

Hinterlasse ein Kommentar zum Beitrag "Pulsierendes Div erstellen ohne Javascript"

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Du hast schon was im Kopf? Super, dann legen wir los!