jQuery触发CSS3 animation-keyframes点击动画

该资源主要讲解如何使用jQuery绑定CSS3的`animation-keyframes`关键帧动画，通过按钮点击触发动画效果。 **jQuery结合CSS3关键帧动画实现详解** CSS3的`@keyframes`规则允许开发者定义动画的过程，将一个状态平滑地过渡到另一个状态。这种技术可以创建丰富的用户体验，而无需依赖JavaScript或Flash。在此示例中，我们将通过jQuery添加和移除类来控制动画的启动和停止。 **1. 样式定义** 首先，我们需要定义两个CSS类： - `.box` 是元素的初始样式，它设置了一个200px*200px的黄色背景矩形，带有中心对齐的文字和红色边框半径。 - `.box-round` 包含了动画的定义，通过jQuery动态添加这个类来触发动画。`.box-round`类调用了`@keyframes`定义的动画，并设置了动画的持续时间和迭代次数。 **2. 关键帧`@keyframes`定义** `@-webkit-keyframes 'box-animation'`定义了一个名为`box-animation`的关键帧动画，包含了三个关键帧： - `from`（0%）：背景和文字颜色均为红色，边框半径为30px。 - `50%`：背景变为蓝色，文字颜色变为橙色，边框半径增加到100px。 - `to`（100%）：背景变为橙色，文字颜色变为蓝色，边框半径恢复到30px。 **3. jQuery绑定** 在JavaScript部分，我们使用jQuery库，当`.btn`按钮被点击时，`.box`元素会获得`.box-round`类，从而开始播放动画。`addClass()`方法是jQuery提供的用于添加CSS类的函数。 ```javascript $(function() { $(".btn").click(function() { $(".box").addClass("box-round"); }); }); ``` 在这个例子中，由于使用了`-webkit-`前缀，该动画仅适用于支持Webkit内核的浏览器（如Chrome、Safari等）。为了确保跨浏览器兼容性，还需要为其他浏览器（Firefox, IE, Edge等）添加相应的非Webkit版本的`@keyframes`和CSS属性。 总结起来，这个示例展示了如何利用jQuery和CSS3的`@keyframes`关键帧动画创建交互式的用户界面元素。通过结合JavaScript事件处理和CSS3动画，我们可以实现更复杂的动画效果，并精确控制何时开始和结束动画。在实际开发中，这可以极大地提升网站或应用的视觉吸引力和用户体验。