simple step to create Music Teddy bear

Using CSS3 key frame property, you can create cool animation Music Teddy Bear without using any JavaScript frameworks, CSS3 & HTML  is helping to solve many web problems in a simple way. In this article I want to discuss how to implement CSS3 animations in a better way, use these and enrich your web projects. Take a quick look at these demos and try all these with modern browsers like Chrome, Firefox and Safari, sure you will love these effects.

simple step to create Music Teddy bear

CSS3  Animation Syntax

#symbols{

  position: absolute;

  left: 650px;

  top: 230px;

  z-index: -2;

}

.heart, .music{

  position: absolute;

  font-size: 64px;

  animation: opacity 4s linear infinite;

}

.one, .three, .five, .seven, .nine, .eleven{

  color: #E66689;

}

.two, .four, .six, .eight, .ten, .twelve{

  color: #DC4160;

}

@keyframes heart1{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(50px,-50px);}

  50%{transform: translate(25px,-100px);}

  100%{transform: translate(90px,-140px); opacity: 0;}

}

@keyframes heart2{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(-75px,-40px);}

  50%{transform: translate(-45px,-70px);}

  100%{transform: translate(-80px,-120px); opacity: 0;}

}

@keyframes heart3{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(15px,-70px);}

  50%{transform: translate(-25px,-110px);}

  100%{transform: translate(20px,-145px); opacity: 0;}

}

@keyframes heart4{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(-45px,-60px);}

  50%{transform: translate(-5px, -90px);}

  100%{transform: translate(-60px,-160px); opacity: 0;}

}

@keyframes heart5{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(-95px,-70px);}

  50%{transform: translate(-50px, -120px);}

  100%{transform: translate(-140px, -180px); opacity: 0;}

}

@keyframes heart6{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(95px,-70px);}

  50%{transform: translate(50px, -120px);}

  100%{transform: translate(140px,-180px); opacity: 0;}

}

@keyframes music1{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(-85px,-80px);}

  50%{transform: translate(-60px, -110px);}

  100%{transform: translate(-150px,-190px); opacity: 0;}

}

@keyframes music2{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(55px,-65px);}

  50%{transform: translate(20px, -100px);}

  100%{transform: translate(70px,-160px); opacity: 0;}

}

@keyframes music3{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(-25px,-65px);}

  50%{transform: translate(-10px, -110px);}

  100%{transform: translate(-60px,-140px); opacity: 0;}

}

@keyframes music4{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(25px,-45px);}

  50%{transform: translate(5px, -110px);}

  100%{transform: translate(55px,-140px); opacity: 0;}

}

@keyframes music5{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(-45px, -55px);}

  50%{transform: translate(-10px, -70px);}

  100%{transform: translate(-100px,-180px); opacity: 0;}

}

@keyframes music6{

  0%{transform: translate(0px,0px); opacity: 1;}

  25%{transform: translate(65px,-65px);}

  50%{transform: translate(40px, -110px);}

  100%{transform: translate(110px,-140px); opacity: 0;}

}

.one{

  animation: heart1 2s 2s linear infinite;

}

.two{

  animation: heart2 2s 4s linear infinite;

}

.three{

  animation: heart3 2s 1s linear infinite;

}

.four{

  animation: heart4 2s 3s linear infinite;

}

.five{

  animation: heart5 2s 2s linear infinite;

}

.six{

  animation: heart6 2s 5s linear infinite;

}

.seven{

  animation: music1 2s 1s linear infinite;

}

.eight{

  animation: music2 2s 4s linear infinite;

}

.nine{

  animation: music3 2s 3s linear infinite;

}

.ten{

  animation: music4 2s 7s linear infinite;

}

.eleven{

  animation: music5 2s 4s linear infinite;

}

.twelve{

  animation: music6 2s 1s linear infinite;

}

CSS3 Syntax

@import url(http://fonts.googleapis.com/css?family=Chewy);
@keyframes jam{
  from{left: 14px;}
  to{left: 18px;}
}

.vday{
  position: absolute;
  left: 285px;
  font: 64px Chewy, sans-serif;;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 5px;
  color: #D33757;
  text-shadow: -3px 3px 0 #A5394C, -6px 6px 0 #543A3C;
}

body{
  background: #2D91EB;
}

.wrap{
  position: relative;
  left: 40%;
  top: 200px;
  width: 262px;
  height: 400px;
}

.head{
  position: absolute;
  top: 32px;
  left: 16px;
  bottom: 170px;
  width: 224px;
  height: 192px;
  border-radius: 50%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 30%, #F7BE60, #D48443);
  animation: jam 1s linear infinite;
}

.muzzle{
  position: absolute;
  left: 56px;
  top: 80px;
  width: 112px;
  height: 96px;
  border-radius: 50%;
  background: #E3C798;
  background-image: radial-gradient(circle at 50% 30%, #FEEED3, #E3C798);
}

.nose{
  position: absolute;
  left: 80px;
  top: 89.6px;
  width: 64px;
  height: 48px;
  border-top-left-radius: 80%;
  border-top-right-radius: 80%;
  border-bottom-left-radius: 85px;
  border-bottom-right-radius: 85px;
  background: #6A4528;
  background-image: radial-gradient(circle at 50% 30%, #965C2B, #6A4528);
  overflow: hidden;
}

.upperNose{
  position: absolute;
  bottom: 24px;
  width: 64px;
  height: 30px;
  background: white;
  border-radius: 50%;
  background-blend-mode: overlay;
  opacity: .1;
}

.noseSpot{
  position: absolute;
  left: 5px;
  bottom: 34px;
  width: 22px;
  height: 10px;
  background: white;
  border-radius: 50%;
  background-blend-mode: overlay;
  opacity: .2;
  transform: rotate(-20deg);
}

.Nostrils{
  position: absolute;
  left: 12px;
  bottom: 0px;
  width: 10px;
  height: 10px;
  background: #6a4528;
  border-radius: 50%;
  box-shadow: 30px 0 #6a4528;
}

.mouth{
  position: absolute;
  left: 64px;
  top: 96px;
  width: 96px;
  height: 64px;
  border-radius: 50%;
  border-bottom: 4px solid #6A4528;
  background: transparent;
}

.line{
  position: absolute;
  left: 110.72px;
  top: 137.6px;
  width: 4px;
  height: 24px;
  background: #6A4528;
}

.eyes{
  position: absolute;
  left: 80px;
  top: 64px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6A4528;
  box-shadow: 48px 0 0 0 #6A4528;
}

.leftEar{
  position: absolute;
  left: 0px;
  top: -32px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 30%, #F7BE60, #D48443);
  z-index: -1;
}

.rightEar{
  position: absolute;
  left: 128px;
  top: -32px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 30%, #F7BE60, #D48443);
  z-index: -1;
}

.leftInnerEar{
  position: absolute;
  left: 12.8px;
  top: -9.6px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 30%, #965C2B, #6A4528);
  z-index: -1;
}

.rightInnerEar{
  position: absolute;
  left: 147.2px;
  top: -12px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 30%, #965C2B, #6A4528);
  z-index: -1;
}

.torso{
  position: absolute;
  left: 42px;
  top: 180px;
  width: 176px;
  height: 192px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 90%;
  border-bottom-right-radius: 90%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 30%, #F7BE60, #D48443);
}

.innerTorso{
  position: absolute;
  left: 24px;
  top: 52px;
  width: 128px;
  height: 128px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 90%;
  border-bottom-right-radius: 90%;
  background: #E3C798;
  background-image: radial-gradient(circle at 50% 30%, #FEEED3, #E3C798);
}

.rightFoot{
  position: absolute;
  left: 112px;
  top: 136px;
  width: 100px;
  height: 80px;
  border-radius: 100%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 30%, #F7BE60, #D48443);
  transform: rotate(-45deg);
}

.leftFoot{
  position: absolute;
  right: 112px;
  top: 136px;
  width: 100px;
  height: 80px;
  border-radius: 100%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 30%, #F7BE60, #D48443);
  transform: rotate(45deg);
}

.leftInnerFoot{
  position: absolute;
  right: 124px;
  top: 144px;
  width: 80px;
  height: 64px;
  border-radius: 100%;
  background: #E3C798;
  background-image: radial-gradient(circle at 50% 30%, #FEEED3, #E3C798);
  transform: rotate(45deg);
}

.rightInnerFoot{
  position: absolute;
  left: 124px;
  top: 144px;
  width: 80px;
  height: 64px;
  border-radius: 100%;
  background: #E3C798;
  background-image: radial-gradient(circle at 50% 30%, #FEEED3, #E3C798);
  transform: rotate(-45deg);
}

.rightArm{
  position: absolute;
  left: 152px;
  top: 16px;
  width: 56px;
  height: 112px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 90%;
  border-bottom-right-radius: 90%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 100%, #F7BE60, #D48443);
  transform: rotate(-30deg);
  z-index: -1;
}

.leftArm{
  position: absolute;
  right: 152px;
  top: 16px;
  width: 56px;
  height: 112px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 90%;
  border-bottom-right-radius: 90%;
  background: #D48443;
  background-image: radial-gradient(circle at 50% 100%, #F7BE60, #D48443);
  transform: rotate(30deg);
  z-index: -1;
}

HTML Code
CSS3 works with HTML doctype this informs the browser to render code in advanced way, include the CSS code within the tag HEAD.

<div id="symbols">
  <div class="heart one">♥</div>
  <div class="heart two">♥</div>
  <div class="heart three">♥</div>
  <div class="heart four">♥</div>
  <div class="heart five">♥</div>
  <div class="heart six">♥</div>
  <div class="music seven">♫</div>
  <div class="music eight">♫</div>
  <div class="music nine">♫</div>
  <div class="music ten">♩</div>
  <div class="music eleven">♩</div>
  <div class="music twelve">♩</div>
</div>
<div style="margin-left:23px;">
<span class="vday">
<span class="char1" style="display: inline-block; transition: none; transform: translateX(-5px) translateY(199px) rotate(-46deg);">H</span>
<span class="char2" style="display: inline-block; transition: none; transform: translateX(-14px) translateY(160px) rotate(-40deg);">a</span>
<span class="char3" style="display: inline-block; transition: none; transform: translateX(-20px) translateY(125px) rotate(-36deg);">p</span>
<span class="char4" style="display: inline-block; transition: none; transform: translateX(-23px) translateY(95px) rotate(-31deg);">p</span>
<span class="char5" style="display: inline-block; transition: none; transform: translateX(-23px) translateY(68px) rotate(-26deg);">y</span>
<span class="char6 empty" style="display: inline-block; transition: none; transform: translateX(-23px) translateY(51px) rotate(-23deg);">&nbsp;</span>
<span class="char11" style="display: inline-block; transition: none; transform: translateX(0px) translateY(0px) rotate(0deg);">T</span>
<span class="char12" style="display: inline-block; transition: none; transform: translateX(5px) translateY(2px) rotate(4deg);">e</span>
<span class="char13" style="display: inline-block; transition: none; transform: translateX(9px) translateY(6px) rotate(7deg);">d</span>
<span class="char14" style="display: inline-block; transition: none; transform: translateX(14px) translateY(13px) rotate(11deg);">d</span>
<span class="char15" style="display: inline-block; transition: none; transform: translateX(18px) translateY(26px) rotate(16deg);">y</span>
<span class="char17 empty" style="display: inline-block; transition: none; transform: translateX(23px) translateY(59px) rotate(24deg);">&nbsp;</span>
<span class="char18" style="display: inline-block; transition: none; transform: translateX(24px) translateY(78px) rotate(28deg);">D</span>
<span class="char19" style="display: inline-block; transition: none; transform: translateX(22px) translateY(108px) rotate(33deg);">a</span>
<span class="char20" style="display: inline-block; transition: none; transform: translateX(18px) translateY(140px) rotate(38deg);">y</span>
<span class="char21" style="display: inline-block; transition: none; transform: translateX(13px) translateY(167px) rotate(42deg);">!</span>
<span class="char22" style="display: inline-block; transition: none; transform: translateX(8px) translateY(187px) rotate(44deg);">!</span>
<span class="char23" style="display: inline-block; transition: none; transform: translateX(3px) translateY(209px) rotate(47deg);">!</span></span>
</div>
<div class="wrap">
  <div class="torso">
    <div class="innerTorso"></div>
    <div class="rightFoot"></div>
    <div class="leftFoot"></div>
    <div class="leftInnerFoot"></div>
    <div class="rightInnerFoot"></div>
    <div class="rightArm"></div>
    <div class="leftArm"></div>
  </div>
  <div class="head">
    <div class="muzzle"></div>
    <div class="nose">
      <div class="upperNose"></div>
      <div class="noseSpot"></div>
      <div class="Nostrils"></div>
    </div>
    <div class="mouth"></div>
    <div class="line"></div>
    <div class="eyes">
      <div class="twinkle"></div>
    </div>
    <div class="leftEar"></div>
    <div class="rightEar"></div>
    <div class="leftInnerEar"></div>
    <div class="rightInnerEar"></div>
  </div>
  <audio autoplay="" loop="">
  <source src="http://dl.avapersia.com/1393/03/30/Ed%20Sheeran%20-%20Thinking%20Out%20Loud%5Bwww.AvaPersia.com%5D%5B320%5D.mp3" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<script src="./stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js.download"></script><script src="./jquery.min.js.download"></script><script src="./jquery.arctext.js.download"></script>
<script>$(document).ready(function () {
    $('.vday').arctext({ radius: 650 });
});
//# sourceURL=pen.js
</script>
</div><iframe style="width:1px;height:1px;position:absolute;top:-1000000px;left:-1000000px;visibility:visible;overflow:hidden;" src="./saved_resource(1).html"></iframe></body></html>

• Tweet
• Share
• Share
• Share
• Share