En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en transición y animaciones de rebotar - Bounce en CSS3.
Background:animation, timing-function, transform
<style>
main{
width: 100%; height: 584px;
padding: 52px 39px;
background: #0c1a39 url('https://tutorialesenlinea.es/uploads/posts/2019-03/1552337541_trucos_y_efectos_en_css3_-tutoriales_en_linea.webp') no-repeat center bottom / 100% 489.5px;
}
.ball {
width: 0;
margin: auto;
padding: 20px;
border-radius: 50%;
background: #b4a078 radial-gradient(at 30% 30%, #f7f5f1, #b4a078);
/* when the animation is complete, keep the last frame */
animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;
}
@keyframes bounce {
40%,
60%,
80%,
to {
transform: translateY(380px);
animation-timing-function: ease-in;
}
50% {
transform: translateY(260px);
}
70% {
transform: translateY(300px);
}
90% {
transform: translateY(360px);
}
}
</style>
<main>
<div class="ball" :style="{animationName}"></div>
<a class="btn" @click="reset">🔄</a>
<a class="btn" @click="play">▶️</a>
</main>
<script>
export default {
data () {
return {
animationName: 'bounce',
}
},
methods: {
reset() {
this.animationName = 'none';
},
play() {
this.animationName = 'bounce';
}
}
}
</script>
Ver resultado
Comentarios