Bootstrap 5 是一个流行的前端框架，它提供了许多内置的动画和过渡效果，使得开发者能够轻松创建动态和交互式网页。以下将详细介绍Bootstrap 5 中动画与过渡的技巧，帮助您打造炫酷的动态效果。

一、Bootstrap 5 动画与过渡概述

Bootstrap 5 的动画和过渡功能主要依赖于 CSS3 的 transition 和 animation 属性。这些效果可以应用于任何 HTML 元素，从而实现平滑的样式变化和复杂动画。

1.1 过渡（Transitions）

过渡是当元素的某个属性值发生变化时，自动触发的一种平滑效果。Bootstrap 5 提供了以下过渡效果：

• 颜色过渡：改变元素的背景色、文字颜色等。
• 尺寸过渡：改变元素的宽高、边距等。
• 位置过渡：改变元素的位置，如上下左右移动。

1.2 动画（Animations）

动画是一种更复杂的动态效果，它允许定义一系列关键帧，使元素在不同时间点呈现出不同的状态。Bootstrap 5 支持以下动画效果：

• 关键帧动画：通过定义关键帧来实现复杂动画。
• 无限循环动画：使动画无限循环播放。

二、Bootstrap 5 动画与过渡技巧

2.1 使用过渡

以下是一个简单的过渡示例，当鼠标悬停在按钮上时，按钮的背景色会从红色平滑过渡到蓝色：

<button class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Hover me!">Hover me!</button>

<script>
  var tooltipTriggerEl = document.querySelector('[data-bs-toggle="tooltip"]');
  var tooltip = new bootstrap.Tooltip(tooltipTriggerEl);

  tooltipTriggerEl.addEventListener('mouseenter', function () {
    tooltip.show();
  });
  tooltipTriggerEl.addEventListener('mouseleave', function () {
    tooltip.hide();
  });
</script>

2.2 使用动画

以下是一个简单的动画示例，使按钮在鼠标悬停时旋转：

<button class="btn btn-primary" data-bs-animation="spin">Spin me!</button>

<script>
  var button = document.querySelector('[data-bs-animation="spin"]');
  button.addEventListener('mouseenter', function () {
    button.classList.add('animate__spin');
  });
  button.addEventListener('mouseleave', function () {
    button.classList.remove('animate__spin');
  });
</script>

2.3 自定义动画

Bootstrap 5 允许您通过自定义动画类来实现更复杂的动画效果。以下是一个自定义动画的示例：

<div class="animate__animated animate__bounce">Bounce me!</div>

<script>
  var element = document.querySelector('.animate__animated');
  element.classList.add('animate__bounce');
</script>

三、总结

Bootstrap 5 的动画与过渡功能为开发者提供了丰富的动态效果，使得网页更加生动有趣。通过掌握这些技巧，您可以轻松打造炫酷的动态效果，提升用户体验。