tabs animation with css bootstrap 4

Bootstrap 4 Tabs animation only CSS

Bootstrap 4 Tabs animation only CSS | 2 animaciones para el Tab de Bootstrap 4 que te van a encantar 🙂


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


DEMO
HTML

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">HOME Lorem ipsum dolor sit amet, consectetur adipisicing elit. A commodi ex animi magnam minima repellat vel non nesciunt sit, praesentium facere? Atque, neque, facilis. Accusantium eveniet illo mollitia dolores nihil.</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, dolor dolore nemo quaerat ex at qui beatae totam placeat deserunt, illum vel, nisi, explicabo aut magnam voluptas eius assumenda modi?</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam eos incidunt aperiam minima, nostrum odio sapiente, maiores ex quibusdam, fugit vitae voluptate accusantium sed, optio ab neque ad praesentium! Accusantium!</div>
</div>

Effect 1

CSS

.tab-pane.fade{transition:all .2s;transform:translateY(1rem)}
.tab-pane.fade.show{transform:translateY(0rem)}

Effect 2

CSS

.tab-pane.active{animation:slide-down 1s ease-out}
@keyframes slide-down{0%{opacity:0;transform:translateY(100%)}
100%{opacity:1;transform:translateY(0)}}
¿Te gusto el post?
¡Compártelo!

Puede que también te interese:


Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones