possible css3 html5?

concil · August 22, 2019

Hey guys,

my css3 "animate.css" doesnt work.. is there support for css3 animations?

if not i must do this with jquery .animate

animate.css: https://daneden.github.io/animate.css/

html:

<html>
	<head>
		<link rel="stylesheet" href="css/animate.css">
		
		<style>
			@font-face {
				font-family: "Roboto", sans-serif;
				src: "/splasher/ui/assets/fonts/Roboto.ttf";
			}

			body { margin: 0px; padding: 0px; font-family: "Roboto", sans-serif; }
			.death-box {
				position: fixed;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.8);
				color: white;
			}

			.death-box > .vertical-center {
				position: absolute;
				width: 100%;
				top: 50%;
				-ms-transform: translateY(-50%);
				transform: translateY(-50%);

				margin: 0;
			}

			.text-center { text-align: center; }

			h1 {
				font-size: 50px;				
			}
			p {
				font-size: 20px;
			}

			span#time {
				padding: 10px;
				border: 5px solid white;
				margin-right: 20px;
			}

			span.minutes {
				margin-right: 5px;
			}

			span.seconds {
				margin-left: 5px;
			}
		</style>

	</head>
	<body>
		<div class="death-box animated fadeIn delay-2s">
			<div class="vertical-center">
				<h1 class="text-center animated fadeInDown delay-3s">DU BIST BEWUSSTLOS!</h1>
				<p class="text-center animated fadeInDown delay-4s"><span id="time"></span> BIS ZUM KRANKENHAUS</p>
			</div>
		</div>

		<script>
			function setDeathTime(time) {
				hours = Math.floor(time / 3600);
				time %= 3600;
				minutes = Math.floor(time / 60);
				seconds = time % 60;
				document.getElementById("time").innerHTML = '<span class="minutes">' + minutes + ' Minuten</span>:<span class="seconds">' + seconds + ' Sekunden</span>';
			}

		</script>
	</body>
</html>

Greetz

Edited August 22, 2019 by concil
add the html script

Sign In

possible css3 html5?

Recommended Posts

concil

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Forums