LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Bounce the Ball!

CSS
body {
  font-family: 'Bitter', serif;
  width: 100vw;
  height: 100vh;
  background: #eeeeee;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 65%, #eeeeee 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 65%, #eeeeee 99%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
  /* IE6-9 */
}

#app {
  text-align: center;
  margin: 60px;
  max-width: 320px;
  margin: 0 auto;
  display: table;
}

.num {
  color: #AF007E;
}

button {
  font-family: 'Bitter';
  background: #c62735;
  color: white;
  border: 0;
  padding: 5px 15px;
  margin: 0 10px;
  border-radius: 4px;
  outline: 0;
  cursor: pointer;
}

h4 {
  margin: 0 0 15px;
}

hr {
  border-color: #F2FAFF;
  opacity: 0.5;
  margin: 15px 0;
}

.ball {
  width: 60px;
  height: 60px;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/soccerball.svg");
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translate3d(0, 300px, 0) rotate(0);
          transform: translate3d(0, 300px, 0) rotate(0);
}

@-webkit-keyframes bouncein {
  1% {
    -webkit-transform: translate3d(0, -400px, 0);
            transform: translate3d(0, -400px, 0);
  }
  20%, 40%, 60%, 80%, 95%, 99%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(0, -80px, 0);
            transform: translate3d(0, -80px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, -40px, 0);
            transform: translate3d(0, -40px, 0);
  }
  70% {
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }
  97% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
}

@keyframes bouncein {
  1% {
    -webkit-transform: translate3d(0, -400px, 0);
            transform: translate3d(0, -400px, 0);
  }
  20%, 40%, 60%, 80%, 95%, 99%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(0, -80px, 0);
            transform: translate3d(0, -80px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, -40px, 0);
            transform: translate3d(0, -40px, 0);
  }
  70% {
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }
  97% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
}
@-webkit-keyframes rollout {
  0% {
    -webkit-transform: translate3d(0, 300px, 0);
            transform: translate3d(0, 300px, 0);
  }
  100% {
    -webkit-transform: translate3d(1000px, 300px, 0);
            transform: translate3d(1000px, 300px, 0);
  }
}
@keyframes rollout {
  0% {
    -webkit-transform: translate3d(0, 300px, 0);
            transform: translate3d(0, 300px, 0);
  }
  100% {
    -webkit-transform: translate3d(1000px, 300px, 0);
            transform: translate3d(1000px, 300px, 0);
  }
}
@-webkit-keyframes ballroll {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(1000deg);
            transform: rotate(1000deg);
  }
}
@keyframes ballroll {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(1000deg);
            transform: rotate(1000deg);
  }
}
.ballmove-enter {
  -webkit-transform: translate3d(0, -400px, 0);
          transform: translate3d(0, -400px, 0);
}

.bouncein {
  -webkit-animation: bouncein 0.9s cubic-bezier(0.47, 0, 0.745, 0.715) both;
          animation: bouncein 0.9s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

.rollout {
  width: 60px;
  height: 60px;
  -webkit-animation: rollout 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
          animation: rollout 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.rollout div {
  -webkit-animation: ballroll 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
          animation: ballroll 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
JS
const Child = {
  template: '#childarea'
};

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
});
Host Instantly Drag and Drop Website Builder

 

Description

Showing how we can use custom CSS classes for each stage of a CSS Animation with the transition component.
Term
Mon, 11/27/2017 - 22:14

Related Codes

Pen ID
Pen ID
Pen ID