Merge pull request #55 from CYPIAPT-LNDSE/AnimateBalloons

Animate balloons, relates to issue #9

balloon.css

@@ -0,0 +1,188 @@
+.st0{fill:none;stroke:#F8EE56;stroke-width:0.5;stroke-miterlimit:10;}
+.st1{fill:#FFC900;}
+.st2{font-family:'MontserratAlternates-Regular';}
+.st3{font-size:12px;}
+.st4{opacity:0.41;}
+.st5{opacity:0.1091;fill:#FFFFFF;}
+.st6{fill:none;}
+
+.pop {
+  display: none;
+}
+
+#balloons {
+  width: 750px;
+  position: absolute;
+  left: 50%;
+  margin-left: -385px;
+  top: 18px;
+}
+
+#strange {
+  -webkit-animation:balloon1 6s ease-in-out infinite;
+  -moz-animation:balloon1 6s ease-in-out infinite;
+  -o-animation:balloon1 6s ease-in-out infinite;
+  animation:balloon1 6s ease-in-out infinite;
+}
+#happy {
+  -webkit-animation:balloon2 6s ease-in-out infinite;
+  -moz-animation:balloon2 6s ease-in-out infinite;
+  -o-animation:balloon2 6s ease-in-out infinite;
+  animation:balloon2 6s ease-in-out infinite;
+}
+#sad {
+  -webkit-animation:balloon3 6s ease-in-out infinite;
+  -moz-animation:balloon3 6s ease-in-out infinite;
+  -o-animation:balloon3 6s ease-in-out infinite;
+  animation:balloon3 6s ease-in-out infinite;
+}
+#boring {
+  -webkit-animation:balloon7 7s ease-in-out infinite;
+  -moz-animation:balloon7 7s ease-in-out infinite;
+  -o-animation:balloon7 7s ease-in-out infinite;
+  animation:balloon7 7s ease-in-out infinite;
+}
+#kind {
+  -webkit-animation:balloon6 8s ease-in-out infinite;
+  -moz-animation:balloon6 8s ease-in-out infinite;
+  -o-animation:balloon6 8s ease-in-out infinite;
+  animation:balloon6 8s ease-in-out infinite;
+}
+#fun {
+  -webkit-animation:balloon6 6s ease-in-out infinite;
+  -moz-animation:balloon6 6s ease-in-out infinite;
+  -o-animation:balloon6 6s ease-in-out infinite;
+  animation:balloon6 6s ease-in-out infinite;
+}
+#angry {
+  -webkit-animation:balloon4 6s ease-in-out infinite;
+  -moz-animation:balloon4 6s ease-in-out infinite;
+  -o-animation:balloon4 6s ease-in-out infinite;
+  animation:balloon4 6s ease-in-out infinite;
+}
+
+/*BALLOON 1*/
+@-webkit-keyframes balloon1 {
+  0%,100%{ -webkit-transform:translateY(0) rotate(-0.5deg);}
+  50%{ -webkit-transform:translateY(-5px) rotate(3deg); }
+}
+@-moz-keyframes balloon1 {
+  0%,100%{ -moz-transform:translateY(0) rotate(-0.5deg);}
+  50%{ -moz-transform:translateY(-5px) rotate(3deg); }
+}
+@-o-keyframes balloon1 {
+  0%,100%{ -o-transform:translateY(0) rotate(-0.5deg);}
+  50%{ -o-transform:translateY(-5px) rotate(3deg); }
+}
+@keyframes balloon1 {
+  0%,100%{ transform:translateY(0) rotate(0.5deg);}
+  50%{ transform:translateY(-5px) rotate(3deg); }
+}
+
+/* BAllOON 2*/
+@-webkit-keyframes balloon2 {
+  0%,100%{ -webkit-transform:translateY(-2px) rotate(2deg);}
+  50%{ -webkit-transform:translateY(-9px) rotate(-1deg); }
+}
+@-moz-keyframes balloon2 {
+  0%,100%{ -moz-transform:translateY(-2px) rotate(2deg);}
+  50%{ -moz-transform:translateY(-9px) rotate(-1deg); }
+}
+@-o-keyframes balloon2 {
+  0%,100%{ -o-transform:translateY(-2px) rotate(2deg);}
+  50%{ -o-transform:translateY(-9px) rotate(-1deg); }
+}
+@keyframes balloon2 {
+  0%,100%{ transform:translateY(-2px) rotate(2deg);}
+  50%{ transform:translateY(-9px) rotate(-1deg); }
+}
+
+/* BAllOON 3*/
+@-webkit-keyframes balloon3 {
+  0%,100%{ -webkit-transform:translate(0, -10px) rotate(0);}
+  50%{ -webkit-transform:translate(-20px, 30px) rotate(-8deg); }
+}
+@-moz-keyframes balloon3 {
+ 0%,100%{ -moz-transform:translate(0, -10px) rotate(0);}
+  50%{ -moz-transform:translate(-20px, 30px) rotate(-8deg); }
+}
+@-o-keyframes balloon3 {
+ 0%,100%{ -o-transform:translate(0, -10px) rotate(0);}
+  50%{ -o-transform:translate(-20px, 30px) rotate(-8deg); }
+}
+@keyframes balloon3 {
+ 0%,100%{ transform:translate(0, -10px) rotate(0);}
+  50%{ transform:translate(-20px, 30px) rotate(-8deg); }
+}
+
+/* BAllOON 4*/
+@-webkit-keyframes balloon4 {
+  0%,100%{ -webkit-transform:translate(0, 0) rotate(-1deg);}
+  50%{ -webkit-transform:translate(-5px, 15px) rotate(-3deg); }
+}
+@-moz-keyframes balloon4 {
+ 0%,100%{ -moz-transform:translate(0, 0) rotate(-1deg);}
+  50%{ -moz-transform:translate(-5px, 15px) rotate(-3deg); }
+}
+@-o-keyframes balloon4 {
+ 0%,100%{ -o-transform:translate(0, 0) rotate(-1deg);}
+  50%{ -o-transform:translate(-5px, 15px) rotate(-3deg); }
+}
+@keyframes balloon4 {
+ 0%,100%{ transform:translate(0, 0) rotate(-1deg);}
+  50%{ transform:translate(-5px, 15px) rotate(-3deg); }
+}
+
+/* BAllOON 5*/
+@-webkit-keyframes balloon5 {
+  0%,100%{ -webkit-transform:translate(0, 0) rotate(-1deg);}
+  50%{ -webkit-transform:translate(-15px, 20px) rotate(-3deg); }
+}
+@-moz-keyframes balloon5 {
+  0%,100%{ -moz-transform:translate(0, 0) rotate(-1deg);}
+  50%{ -moz-transform:translate(-15px, 20px) rotate(-3deg); }
+}
+@-o-keyframes balloon5 {
+  0%,100%{ -o-transform:translate(0, 0) rotate(-1deg);}
+  50%{ -o-transform:translate(-15px, 20px) rotate(-3deg); }
+}
+@keyframes balloon5 {
+  0%,100%{ transform:translate(0, 0) rotate(-1deg);}
+  50%{ transform:translate(-15px, 20px) rotate(-3deg); }
+}
+
+/* BAllOON 6*/
+@-webkit-keyframes balloon6 {
+  0%,100%{ -webkit-transform:translate(0, 5px) rotate(-1deg);}
+  50%{ -webkit-transform:translate(-20px, 5px) rotate(-5deg); }
+}
+@-moz-keyframes balloon6 {
+  0%,100%{ -moz-transform:translate(0, 5px) rotate(-1deg);}
+  50%{ -moz-transform:translate(-20px, 5px) rotate(-5deg); }
+}
+@-o-keyframes balloon6 {
+  0%,100%{ -o-transform:translate(0, 5px) rotate(-1deg);}
+  50%{ -o-transform:translate(-20px, 5px) rotate(-5deg); }
+}
+@keyframes balloon6 {
+  0%,100%{ transform:translate(0, 5px) rotate(-1deg);}
+  50%{ transform:translate(-20px, 5px) rotate(-5deg); }
+}
+
+/* BAllOON 7*/
+@-webkit-keyframes balloon7 {
+  0%,100%{ -webkit-transform:translate(0,0) rotate(0);}
+  50%{ -webkit-transform:translate(2px,-2px) rotate(-2deg); }
+}
+@-moz-keyframes balloon7 {
+  0%,100%{ -moz-transform:translate(0,0) rotate(0);}
+  50%{ -moz-transform:translate(2px,-2px) rotate(-2deg); }
+}
+@-o-keyframes balloon7 {
+  0%,100%{ -o-transform:translate(0,0) rotate(0);}
+  50%{ -o-transform:translate(2px,-2px) rotate(-2deg); }
+}
+@keyframes balloon7 {
+  0%,100%{ transform:translate(0,0) rotate(0);}
+  50%{ transform:translate(2px,-2px) rotate(-2deg); }
+}

balloon.js

@@ -0,0 +1,27 @@
+document.getElementById('strange').addEventListener('click', function(){
+  document.getElementById('strange').classList.add('pop');
+});
+
+document.getElementById('happy').addEventListener('click', function(){
+  document.getElementById('happy').classList.add('pop');
+});
+
+document.getElementById('sad').addEventListener('click', function(){
+  document.getElementById('sad').classList.add('pop');
+});
+
+document.getElementById('boring').addEventListener('click', function(){
+  document.getElementById('boring').classList.add('pop');
+});
+
+document.getElementById('kind').addEventListener('click', function(){
+  document.getElementById('kind').classList.add('pop');
+});
+
+document.getElementById('angry').addEventListener('click', function(){
+  document.getElementById('angry').classList.add('pop');
+});
+
+document.getElementById('fun').addEventListener('click', function(){
+  document.getElementById('fun').classList.add('pop');;
+});

main.css

@@ -262,12 +262,12 @@ p.eating__text {
 .row {
   margin-left: 40px;
 }
-.balloons-background-image {
+/*.balloons-background-image {
   background-image: url(assets/balloons-animated.svg);
   background-repeat: no-repeat;
   background-size: cover;
   height: 100%;
-}
+}*/
 .eaten-banana {
   width: 200px;
 }