Animation

Animation.markdown

Animation

I just wanted to rebuild the phone animation from "Brian Phillips". Thanks for this nice animation! :)

A Pen by Norman Dubois on CodePen.

License.

index.html

<div class="phone">
  <div class="phone-shade"></div>
  <div class="phone-speaker"></div>
  <div class="phone-screen">
    <div class="phone-header">
      <div class="phone-menu"></div>
    </div>

  <!--Post -->
  <div class="phone-post" id="first-post">
    <div class="post-thumb"></div>
    <div class="line post-title-1"></div>
    <div class="line post-title-2"></div>
    <div class="line post-line-1"></div>
    <div class="line post-line-2"></div>
  </div>
    <!--Post -->
  <div class="phone-post">
    <div class="post-thumb"></div>
    <div class="line post-title-1"></div>
    <div class="line post-title-2"></div>
    <div class="line post-line-1"></div>
    <div class="line post-line-2"></div>
  </div>
    <!--Post -->
  <div class="phone-post">
    <div class="post-thumb"></div>
    <div class="line post-title-1"></div>
    <div class="line post-title-2"></div>
    <div class="line post-line-1"></div>
    <div class="line post-line-2"></div>
  </div>
    <!--Post -->
  <div class="phone-post">
    <div class="post-thumb"></div>
    <div class="line post-title-1"></div>
    <div class="line post-title-2"></div>
    <div class="line post-line-1"></div>
    <div class="line post-line-2"></div>
  </div>
    <!--Post -->
  <div class="phone-post">
    <div class="post-thumb"></div>
    <div class="line post-title-1"></div>
    <div class="line post-title-2"></div>
    <div class="line post-line-1"></div>
    <div class="line post-line-2"></div>
  </div>
    <!--Post -->
  <div class="phone-post">
    <div class="post-thumb"></div>
    <div class="line post-title-1"></div>
    <div class="line post-title-2"></div>
    <div class="line post-line-1"></div>
    <div class="line post-line-2"></div>
  </div>
    <!--Post -->
  <div class="phone-post">
    <div class="post-thumb"></div>
    <div class="line post-title-1"></div>
    <div class="line post-title-2"></div>
    <div class="line post-line-1"></div>
    <div class="line post-line-2"></div>
  </div>
  
</div> <!-- Phone Screen-->
  <div class="phone-button"></div>
</div><!--Phone -->

script.js

$(document).ready(function(){
  $('.phone-post').addClass('active');
  setTimeout(function(){
    $('.phone-post').removeClass('active');
  }, 1000);
  setInterval(function(){
    $('.phone-post').addClass('active');
    setTimeout(function(){
      $('.phone-post').removeClass('active');
    }, 1000);
  }, 1500);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$darkbluegray: rgb(65, 82, 96);
$bluegray: rgb(85, 95, 107);
$btnColor: rgb(73, 82, 91);
$speakerColor: rgb(62, 71, 82);
$black: rgb(30, 30, 30);
$cream: rgb(242, 235, 226);
$lightGray: rgb(176, 176, 176);
$lighterGray: rgb(218, 218, 218);
$borderColor: rgb(98, 96, 93);
$bodyColor: rgb(102,115,133);
body {
  background: $bodyColor;
}
*, *:before, *:after {
  box-sizing: border-box;
}
.clear {
  clear: both;
}
.phone {
  margin: 10px auto 50px auto;
  box-shadow: 10px 10px 10px $darkbluegray;
}
.phone {
  height: 428px;
  width: 226px;
  background: $darkbluegray;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  .phone-shade {
    position: absolute;
    height: 500px;
    width: 200px;
    left: 50%;
    background: $bluegray;
    transform: rotate(18deg);
  }
  .phone-speaker {
    height: 8px;
    width: 42px;
    border-radius: 4px;
    background: $speakerColor;
    position: relative;
    top: 23px;
    left: 50%;
    margin-left: -21px;
  }
  .phone-button {
    height: 40px;
    width: 40px;
    background: $btnColor;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    bottom: 10px;
  }
  .phone-screen {
    height: 302px;
    width: 208px;
    background: $cream;
    position: absolute;
    left: 9px;
    top: 58px;
    overflow: hidden;
    .phone-header {
      width: 100%;
      height: 30px;
      background: $black;
      position: relative;
      z-index: 3;
      color: white;
      .phone-menu {
        position: absolute;
        right: 10px;
        top: 9px;
        background: white;
        width: 15px;
        height: 2px;
        &:before {
          content: "";
          width: 15px;
          height: 2px;
          top: 5px;
          background: $cream;
          position: absolute;
        }
        &:after {
          content: "";
          width: 15px;
          height: 2px;
          top: 10px;
          background: $cream;
          position: absolute;
        }
      }
    }
  }
  .phone-post {
    padding: 15px 10px;
    border-bottom: 2px solid $borderColor;
    overflow: hidden;
    height: 60px;
    position: relative;
    transform: translateY(-60px);
    z-index: 2;
    &.active {
      animation: new-post 1s ease infinite;
    }
  }
}
 .post-thumb {
      height: 29px;
      width: 27px;
      background: $lightGray;
      position: absolute;
      margin-right: 5px;
    }
    .post-title-1 {
      height: 4px;
      width: 15px;
      margin-top: 3px;
      background: $lighterGray;
      position: absolute;
      left: 44px;
      }
      .post-title-2 {
        height: 4px;
        width: 30px;
        margin-top: 3px;
        background: $lighterGray;
        position: absolute;
        left: 65px;
    }
    .post-line-1 {
      height: 4px;
      width: 150px;
      background: $lightGray;
      position: absolute;
      top: 27px;
      left: 44px;
    }
    .post-line-2 {
      height: 4px;
      width: 100px;
      background: $lightGray;
      position: absolute;
      top: 36px;
      left: 44px;
    }
    #first-post {
      .line {
        width: 0;
      }
    }
    #first-post.active {
      .post-thumb {
        transform: scale(0);
        animation: box-grow 500ms ease 500ms forwards;
      }
      .line {
        transition: width 500ms ease;
        transition-delay: 600ms;
      }
      .post-title-1 {
        width: 15px;
      }
      .post-title-2 {
        width: 30px;
      }
      .post-line-1 {
        width: 150px;
      }
      .post-line-2 {
        width: 100px;
      }
    }
@keyframes new-post {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes box-grow {
  0% {
    transform: scale(0) rotate(25deg);
  }
  60% {
    transform: scale(1.2) rotate(-10deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

This is Animation example