Animations

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

Examples

                    
                      <a class="btn btn-primary btn-lg transition-3d-hover hover-shadow-primary" href="#0">.transition-3d-hover</a>
                      <a class="btn btn-success btn-lg transition-3d-hover hover-shadow-success" href="#0">.transition-3d-hover</a>
                      <a class="btn btn-secondary btn-lg transition-3d-hover hover-shadow-secondary" href="#0">.transition-3d-hover</a>
                      <a class="btn btn-danger btn-lg transition-3d-hover hover-shadow-danger" href="#0">.transition-3d-hover</a>
                      <a class="btn btn-warning btn-lg transition-3d-hover hover-shadow-warning" href="#0">.transition-3d-hover</a>
                      <a class="btn btn-info btn-lg transition-3d-hover hover-shadow-info" href="#0">.transition-3d-hover</a>
                      <a class="btn btn-light btn-lg transition-3d-hover hover-shadow-light" href="#0">.transition-3d-hover</a>
                      <a class="btn btn-dark btn-lg transition-3d-hover hover-shadow-dark" href="#0">.transition-3d-hover</a>
Card image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

                    
                      <div class="card transition-3d-hover">
                        <img class="card-img-top" src="assets/img/img7.jpg" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        </div>
                      </div>