Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Beispiele</title>
	<style>
		div.anim {
			width: 100px;
			height: 100px;
			background: red;
			position :relative;
			animation: myanim 10s infinite;
		}
		span.dynamisch:after {
			content: '0%';
            		animation: anzeige 10s infinite;
		}

		@keyframes myanim {
			0%   { left: 0px; background: red;}
			25% {left: 150px;}
			50%  { left: 300px; background: black;}
			75% {left: 150px;}
			100% { left: 0px; background: red;}
		}
		@keyframes anzeige {
			0%   {content: '0% - Farbe: Rot';}
			25% {content: '25% - Farbe: Dunkelrot';}
			50%  {content: '50% - Farbe: Schwarz';}
			75% {content: '75% - Farbe: Dunkelrot';}
			100% {content: '100% - Farbe: Rot';}
		}
	</style>
</head>
<body>
	<h1>Die Animation befindet sich bei: <span class="dynamisch"></span></h1>

	<div class="anim"></div>
</body>
</html>


 

            

Texte ein- und ausblenden:

Mit der CSS-Eigenschaft: "content:' ... ' " lassen sich im Pseudoelement ":after" dynaische Text in eine Animation einfügen. Bei komplexeren Objekten, Boxen mit Text und Bildern, usw., können ganze Objekte ein- oder ausgeblendet werden. Diese Methode eignet sich auch für ein "Debugging" beim Bauen und einer Prüfung im Browser.