title: Difficult Web Animation
body: <p>I want to create a CSS or JS Animation for a website. But I don´t know how I can code this. The Animation is difficult to explain, thats why I create a little gif-animation for a better understanding. </p>
  
  <p><a href="http://abload.de/img/animationxep49.gif" rel="nofollow">http://abload.de/img/animationxep49.gif</a></p>
  
  <p>//Edit: My main problem is the transition from white to black which I illustrate in the example. Does anybody know a solution for this?</p>
  
  <p>And here is my code without animations:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>/* Responsive Navigation */ 
  $(document).ready(function(){
          $('#toggle').on('click', function(e){
              e.preventDefault();
              $('nav ul').slideToggle();
          });
        });
     $(window).on('resize', function () {  
        if (window.matchMedia('(min-width: 860px)').matches) {
                $('nav ul').show();
       }
       else {
          $('nav ul').hide();
      }
   });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>/* Allgemeines */
  
  html, body {
      margin: 0px;
      padding: 0px; 
      color: #0a0a0a;
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      height: 100%;
  }
  
  h1, h2, h3, h4, h5, h6{
      font-family: 'Playfair Display', serif;
      font-weight: 400;
  }
  h1 {
      font-size: 100px;
      font-size: 7.14rem;
      text-align: center;
      line-height: 1.2;
  }
  a {
      transition: 0.3s;
  }
  a:hover {
      color: #717171;
  }
  a:active {
      font-weight: 700;
  }
  
  
  
  
  
  
  /* Spezifisch */
  
  .logo {
      float: left;
      padding-top: 6px;
      padding-left: 15px;
  }
  
  .logo a{
      text-decoration: none;
      color: #0a0a0a;
      font-size: 22px;
      font-size: 1,57rem;
      font-family: 'Playfair Display', serif;
  }
  .logo a:hover {
      color: #717171;
  }
  #toggle {
      display: none;
  }
  nav ul {
      float: right;
      margin-top: 11px;
      padding-right: 20px;
  }
  nav ul li {
      float: left;
      display: inline;
  
      padding-right: 20px;
  }
  nav ul li a{
      color: #0a0a0a;
      text-decoration: none;
  }
  
  header {
      clear: both;    
      width: 100%;
      height: 90%;
      position: relative;
  
  
  }
  header h1 {
      color: white;
      text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
  
      position: relative;
      top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  .darken {
      width: 100%;
      height: 100%;
      position: absolute;
      background: rgba(10, 10, 10, 0.1);
  }
  
  
  /* Breakpoints */
  
  @media screen and (max-width: 860px){
      .logo {
  
         width: 100%;
         padding: 6px 0 7px 0px;
      }
      .logotext {
          margin-left: 15px;
      }
      #toggle {
          display: inline;
          float: right;
          padding-right: 15px;
      }
      nav ul{
          width: 100%;
          padding: 0;
          display: none;
      }
      nav ul li {
          width: 100%;
          text-align: center;
          padding: 0;
      }
      nav ul li a {
          display: block;       
          padding: 20px 0 20px 0;
      }
  }
  @media screen and (max-width: 1100px){
      h1 {
          font-size: 84px;
          font-size: 6rem;
      }
  }
  @media screen and (max-width: 830px){
      h1 {
          font-size: 70px;
          font-size: 5rem;
      }
  }
  @media screen and (max-width: 650px){
      h1 {
          font-size: 56px;
          font-size: 4rem;
      }
  }
  @media screen and (max-width: 550px){
      h1 {
          font-size: 42px;
          font-size: 3rem;
      }
  }
  @media screen and (max-width: 400px){
      h1 {
          font-size: 28px;
          font-size: 2rem;
      }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;title&gt;Von der Berkelaue&lt;/title&gt;
  
      &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic|Playfair+Display' rel='stylesheet' type='text/css'&gt;
      &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="logo"&gt;
          &lt;a href="#" class="logotext"&gt; Von der Berkelaue&lt;/a&gt; 
          &lt;a href="#" id="toggle"&gt; Menü&lt;/a&gt; 
      &lt;/div&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Startseite&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Aktuelles&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Über Uns&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Würfe&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Galerie&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Gästebuch&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;header style="background: url(img/header.jpg) no-repeat 25% 30%;-moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-size: cover; "&gt;
         &lt;div class="darken"&gt;
              &lt;h1&gt;Willkommen bei &lt;br /&gt; den Berkelauern!&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;content&gt;
  
              &lt;h1&gt;Willkommen bei &lt;br /&gt; den Berkelauern!&lt;/h1&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae repellat soluta veritatis architecto, cum quod adipisci excepturi at aperiam iste!&lt;/p&gt;
  
      &lt;/content&gt;
  
      &lt;script src="js/functions.js" type="application/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  
  
  <p>//Edit Nr.2:</p>
  
  <p>Now I have a solution which works on a example page. Now I have to try that this works on my page.
  <div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.first, .second {
    position: absolute;
    left: 25%;
    top: 40%;
    
    text-align: center;
    display: block;
    
    overflow: hidden;
    color: red;
    }
  
  .second {
    color:black;
    max-height:60px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="first"&gt;It´s a test.&lt;br /&gt;But it won´t work on my site.&lt;/h1&gt;
  &lt;h1 class="second"&gt;It´s a test.&lt;br /&gt;But it won´t work on my site.&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anybody have a good idea how I can create a animation which works?</p>
  
  <p>Thanks, Jannis</p>