Black bear

black-bear.markdown

Black bear

A Pen by Aakash Gill on CodePen.

License.

index.html

<div class="container">
  <div class="bear">
    <div class="bear__ears">
      <div class="bear__ears__left ear"></div>
      <div class="bear__ears__right ear"></div>
    </div>
    <div class="bear__body">
      <div class="bear__eyes">
        <div class="bear__eyes--left eye"></div>
        <div class="bear__eyes--right eye"></div>
      </div>
      <div class="bear__nose">
        <div class="bear__nose--inner"></div>
      </div>
    </div>
  </div>
  <div class="shadow"></div>
</div>

style.scss

body{
  margin: 0;
  padding: 0;
  background: #acb;
  .container{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.bear{
  width: 240px;
  -webkit-animation:updown 2s infinite alternate;
          animation:updown 2s infinite alternate;
  &__ears{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-animation:updown 2s infinite alternate;
            animation:updown 2s infinite alternate;
    -webkit-transform:translateY(10px);
        -ms-transform:translateY(10px);
            transform:translateY(10px);
    .ear{
      width: 50px;
      height: 60px;
      background: #000;  
    }
    &__left{
      -webkit-border-radius:50% 100%;
              border-radius:50% 100%;
    }
    &__right{
      -webkit-border-radius:100% 50%;
              border-radius:100% 50%;
    }
  }
  &__body{
    width: 100%;
    height: 230px;
    background: #000;
    -webkit-border-radius: 50% / 40% 40% 60% 60%;
            border-radius: 50% / 40% 40% 60% 60%;
  }
  &__eyes{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    position: relative;
    -webkit-transform:translateY(60px);
        -ms-transform:translateY(60px);
            transform:translateY(60px);
    -webkit-transition:all .3s linear;
    -o-transition:all .3s linear;
    transition:all .3s linear;
    .eye{
      width: 20px;
      background: #fff;
      height: 15px;
      position: absolute;
      -webkit-border-radius:50% / 40% 40% 60% 60%;
              border-radius:50% / 40% 40% 60% 60%;
      -webkit-animation:blink .5s infinite alternate;
              animation:blink .5s infinite alternate;
      -webkit-transition:all .3s ease;
      -o-transition:all .3s ease;
      transition:all .3s ease;
    }
    &--left{
      left: 50px;
      -webkit-transform:skewY(5deg);
          -ms-transform:skewY(5deg);
              transform:skewY(5deg);
    }
    &--right{
      right: 50px;
      -webkit-transform:skewY(-5deg);
          -ms-transform:skewY(-5deg);
              transform:skewY(-5deg);
    }
  }
  &__nose{
    width: 80px;
    background: #fff;
    height: 100px;
    margin: auto;
    -webkit-transform:translateY(80px);
        -ms-transform:translateY(80px);
            transform:translateY(80px);
    -webkit-border-radius: 50% / 60% 60% 30% 30%;
            border-radius: 50% / 60% 60% 30% 30%;
    position: relative;
    -webkit-animation:moveNose 3s infinite;
            animation:moveNose 3s infinite;
    -webkit-transition:.4s ease;
    -o-transition:.4s ease;
    transition:.4s ease;
    &--inner{
      width: 50px;
      height: 26px;
      background: #000;
      position: absolute;
      top: 50%;
      left:50%;
      -webkit-transform:translate(-50%,-50%);
          -ms-transform:translate(-50%,-50%);
              transform:translate(-50%,-50%);
      -webkit-border-radius:50% / 40% 40% 60% 60%;
              border-radius:50% / 40% 40% 60% 60%;
      -webkit-animation:flip .5s infinite alternate;
              animation:flip .5s infinite alternate;
      &:after{
        content:"";
        width: 20px;
        height: 20px;
        background: #000;
        position: absolute;
        bottom: -6px;
        left:50%;
        -webkit-border-radius:50px;
                border-radius:50px;
        -webkit-transform:translate(-50%);
            -ms-transform:translate(-50%);
                transform:translate(-50%);
        -webkit-box-shadow:
          20px 5px 0 #fff,
          -20px 5px 0 #fff;
                box-shadow:
          20px 5px 0 #fff,
          -20px 5px 0 #fff;
      }
    }
  }
}
.shadow{
  width: 200px;
  height: 30px;
  margin: auto;
  margin-top: -20px;
  background: #000;
  opacity:.6;
  display: block;
  -webkit-border-radius:100%;
          border-radius:100%;
  -webkit-transform:translateY(60px);
      -ms-transform:translateY(60px);
          transform:translateY(60px);
  -webkit-filter:blur(17px);
          filter:blur(17px);
  -webkit-animation:shadow 2s infinite alternate;
          animation:shadow 2s infinite alternate;
}

@-webkit-keyframes updown{
  to{
    -webkit-transform:translateY(40px);
            transform:translateY(40px);
  }
}

@keyframes updown{
  to{
    -webkit-transform:translateY(40px);
            transform:translateY(40px);
  }
}
@-webkit-keyframes blink{
  from{
    height: 0;
  }
  to{
    height: 15px;
  }
}
@keyframes blink{
  from{
    height: 0;
  }
  to{
    height: 15px;
  }
}

@-webkit-keyframes moveNose{
  0%,100%,90%{
   -webkit-transform:translateY(80px);
           transform:translateY(80px);   
  }
  20%,30%{
    -webkit-transform:translate(20px,60px);
            transform:translate(20px,60px);
  }
  60%,70%{
    -webkit-transform:translate(-20px,60px);
            transform:translate(-20px,60px);
  }
}

@keyframes moveNose{
  0%,100%,90%{
   -webkit-transform:translateY(80px);
           transform:translateY(80px);   
  }
  20%,30%{
    -webkit-transform:translate(20px,60px);
            transform:translate(20px,60px);
  }
  60%,70%{
    -webkit-transform:translate(-20px,60px);
            transform:translate(-20px,60px);
  }
}
@-webkit-keyframes shadow{
  from{
    width: 200px;
  }
  to{
    width: 150px;
  }
}
@keyframes shadow{
  from{
    width: 200px;
  }
  to{
    width: 150px;
  }
}