CSS3强大的动画效果Animate使用说明及浏览器兼容介绍

简介

在网站设计中，动画效果通常能增加用户的交互体验和视觉效果。而CSS3中的动画效果Animate提供了一种简单易用的方式去实现动效，同时支持现代化的浏览器，减少了开发者编写JavaScript代码的工作量。

使用说明

安装

Animate是由第三方JavaScript库jQuery UI提供的，所以需要在引入Animate之前先引入jQuery。可以通过CDN或下载到本地使用：

<!-- 引入 jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 jQuery UI（含 Animate） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

基本语法

Animate提供了一个.animate()方法用于移动、旋转、缩放等基本动画效果的实现。

$(selector).animate({params},speed,callback);

selector：CSS选择器，用于选取目标元素。
params：动画效果的参数，包括CSS属性和数值。可以使用对象字面量的方式定义多个属性，或者使用字符串形式。
speed：动画持续时间，可以设置为毫秒数、"slow"或"fast"（分别对应600ms和200ms），或者省略但需要在调用.animate()之前设置一个默认值。
callback：可选参数，动画完成后要执行的回调函数。

实例说明

移动动画

下面的代码演示了如何使用Animate实现一个元素在页面中水平移动的动画效果：

<style>
  .box {
    position: relative;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #009688;
    color: #fff;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
  }
</style>

<div class="box">Click Me</div>

<script>
  $('.box').click(function() {
    $(this).animate({left: '250px'}, 'slow');
  });
</script>

在这个例子中，我们定义了一个宽高为100px的矩形元素，当用户点击它时，使用.animate()方法实现元素沿x轴向右移动250px的动画效果，持续时间为slow（即600ms）。

转换动画

除了移动动画，Animate还支持旋转、缩放等多种动画效果。下面的代码实现了一个方块元素在页面中不停旋转的效果：

<style>
  .box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #009688;
    color: #fff;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
  }
</style>

<div class="box">Click Me</div>

<script>
  setInterval(function() {
    $('.box').animate({borderSpacing: '+=360'}, {
      step: function(now, fx) {
        $(this).css('transform', 'rotate(' + now + 'deg)');
      },
      duration: 2000
    });
  }, 2000);
</script>

在这个例子中，我们通过CSS3中的border-spacing属性实现旋转动画。由于Animate无法直接操作CSS3属性，我们可以通过定义border-spacing为0然后通过Animate改变其值，同时在动画执行中通过回调函数的step参数更新transform属性。这里我们使用了JavaScript的定时器函数setInterval()，每间隔2秒钟执行一次动画效果。