Sign in to follow this  
concil

possible css3 html5?

Recommended Posts

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 by concil
add the html script

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.