CSS and HTML 5 – Basic Animation for Alerts

CSS can be used to create basic animations for Web Based Dashboards to attract user attention.

alertStyle.css

.alertBox {
	width: 100%;
	height: 40px;
	background-color: white;
	animation-name: alert;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes alert {
	from {background-color: red;}
	to {background-color: white;}
}

.alertSquare {
	width: 40px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	animation-name: alert;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.alertMessage {
	animation-name: alertFont;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes alertFont {
	from {font-size: 40px;}
	to {font-size: 200px;}
}

.alertText {
	text-align: center;
	font-size: 35px;
}

alert.html

html>
<head>
<link rel="stylesheet" href="alertStyle.css" />
</head>
<body>

<div class="alertBox"></div>
<br>
<div class="alertBox">
<p class="alertText"> 95 Degrees</p>
</div>
<br>
<div class="alertSquare">
<p class="alertText">95</p>
</div>
<br>

<p class="alertMessage"> HELP!!!</p>

</body>
</html>

Be the first to comment

Leave a Reply