# Animations

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

## Examples

.transition-3d-hover .transition-3d-hover .transition-3d-hover .transition-3d-hover .transition-3d-hover .transition-3d-hover .transition-3d-hover .transition-3d-hover

                          <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 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>