|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Animationen</title>
|
|
|
|
|
<link rel="stylesheet" href="../../css/layout.css">
|
|
|
|
|
<link rel="stylesheet" href="../../css/animations.css">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<h1>Animationen</h1>
|
|
|
|
|
</header>
|
|
|
|
|
<nav class="navigationbar">
|
|
|
|
|
<a href="../home.html">Home</a>
|
|
|
|
|
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
|
|
|
|
<a href="../grid/allgemeines.html">Grid-Layout</a>
|
|
|
|
|
<a href="../text_styling/allgemeines.html">Text-Styling</a>
|
|
|
|
|
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
|
|
|
|
<a href="animations.html">Animationen</a>
|
|
|
|
|
</nav>
|
|
|
|
|
<nav class="navigationbar">
|
|
|
|
|
<a href="animations.html">Animation Einführung</a>
|
|
|
|
|
<a href="keyframes.html">Animations Funktionen</a>
|
|
|
|
|
</nav>
|
|
|
|
|
<main>
|
|
|
|
|
<article>
|
|
|
|
|
<section>
|
|
|
|
|
<h2>
|
|
|
|
|
Animationen mit CSS
|
|
|
|
|
</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Mit Animationen und den dazugehörenden Funktionen wie zum Beispiel @keyframes
|
|
|
|
|
lassen sich relativ einfach Objekte erstellen,
|
|
|
|
|
die sich über die Webseite bewegen.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Schrift kann außerdem gedreht und verschoben werden. <br>
|
|
|
|
|
Dadurch erscheint eine Webseite viel dynamischer und visuel ansprechender.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<div id="beispiel"></div>
|
|
|
|
|
<br>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
#example2 { <br>
|
|
|
|
|
 #beispiel{ <br>
|
|
|
|
|
  background-color: aqua; <br>
|
|
|
|
|
  color: black; <br>
|
|
|
|
|
  border: 3px solid rgb(255, 0, 0); <br>
|
|
|
|
|
  border-radius: 0.4em; <br>
|
|
|
|
|
  animation-timing-function: ease; <br>
|
|
|
|
|
  width: 100px; <br>
|
|
|
|
|
  height: 100px; <br>
|
|
|
|
|
  animation-name: beispiel; <br>
|
|
|
|
|
  animation-duration: 5s; <br>
|
|
|
|
|
  animation-iteration-count: infinite; <br>
|
|
|
|
|
  animation-direction: alternate; <br>
|
|
|
|
|
  text-align: center; <br>
|
|
|
|
|
  align-self: end; <br>
|
|
|
|
|
  &position: relative; <br>
|
|
|
|
|
 } <br>
|
|
|
|
|
<br>
|
|
|
|
|
 @keyframes beispiel { <br>
|
|
|
|
|
  0% { <br>
|
|
|
|
|
   transform: rotate(0deg); <br>
|
|
|
|
|
   left:var(--width2); <br>
|
|
|
|
|
  } <br>
|
|
|
|
|
<br>
|
|
|
|
|
  25% { <br>
|
|
|
|
|
   transform: rotate(90deg); <br>
|
|
|
|
|
   left:var(--width2); <br>
|
|
|
|
|
   background-color: blue; <br>
|
|
|
|
|
   border-color: orange; <br>
|
|
|
|
|
  } <br>
|
|
|
|
|
<br>
|
|
|
|
|
  50% { <br>
|
|
|
|
|
   transform: scale(1.5); <br>
|
|
|
|
|
   background-color: blueviolet; <br>
|
|
|
|
|
   border-color: green; <br>
|
|
|
|
|
   transform: rotate(180deg); <br>
|
|
|
|
|
   left:var(--width1); <br>
|
|
|
|
|
  } <br>
|
|
|
|
|
<br>
|
|
|
|
|
  75% { <br>
|
|
|
|
|
   transform: rotate(270deg); <br>
|
|
|
|
|
   left:var(--width1); <br>
|
|
|
|
|
   background-color: red; <br>
|
|
|
|
|
   border-color: lightblue; <br>
|
|
|
|
|
  } <br>
|
|
|
|
|
<br>
|
|
|
|
|
  100% { <br>
|
|
|
|
|
   background-color: yellow; <br>
|
|
|
|
|
   border-color: pink; <br>
|
|
|
|
|
   transform: rotate(360deg); <br>
|
|
|
|
|
   left:var(--width2); <br>
|
|
|
|
|
  } <br>
|
|
|
|
|
 } <br>
|
|
|
|
|
}
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
|
|
|
|
<p>Erstellt von: Leon Ehricht</p>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
