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 🙂

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: