0
# Animation Effects
1

2
CSS3-powered animation system with transition support and common effect methods. Leverages hardware acceleration for smooth performance on modern devices.
3

4
## Capabilities
5

6
### Core Animation
7

8
Main animation method providing full control over CSS transitions.
9

10
```javascript { .api }
11
/**
12
 * Animate CSS properties using CSS transitions
13
 * @param properties - Object of CSS properties to animate
14
 * @param duration - Animation duration (number in ms, or string: 'fast', 'slow')
15
 * @param ease - Easing function name or CSS timing function
16
 * @param callback - Function to call when animation completes
17
 * @param delay - Delay before starting animation (in ms)
18
 * @returns Original collection
19
 */
20
$.fn.animate(properties, duration, ease, callback, delay);
21

22
/**
23
 * Lower-level animation method
24
 * @param properties - CSS properties to animate
25
 * @param duration - Animation duration
26
 * @param ease - Easing function
27
 * @param callback - Completion callback
28
 * @param delay - Start delay
29
 * @returns Original collection
30
 */
31
$.fn.anim(properties, duration, ease, callback, delay);
32
```
33

34
**Usage Examples:**
35

36
```javascript
37
// Basic animation
38
$('.box').animate({
39
  left: '100px',
40
  top: '50px',
41
  opacity: 0.5
42
}, 500);
43

44
// With easing and callback
45
$('.element').animate({
46
  width: '200px',
47
  height: '200px'
48
}, 1000, 'ease-out', function() {
49
  console.log('Animation complete');
50
});
51

52
// Using string durations
53
$('.item').animate({opacity: 0}, 'fast'); // 200ms
54
$('.item').animate({opacity: 1}, 'slow'); // 600ms
55

56
// Complex animation with delay
57
$('.card').animate({
58
  transform: 'translateX(100px) rotate(45deg)',
59
  'background-color': '#ff0000'
60
}, 800, 'ease-in-out', null, 200);
61
```
62

63
### Fade Effects
64

65
Convenient methods for opacity-based animations.
66

67
```javascript { .api }
68
/**
69
 * Fade elements in (show with opacity animation)
70
 * @param speed - Animation duration ('fast', 'slow', or milliseconds)
71
 * @param callback - Function to call when complete
72
 * @returns Original collection
73
 */
74
$.fn.fadeIn(speed, callback);
75

76
/**
77
 * Fade elements out (hide with opacity animation)
78
 * @param speed - Animation duration
79
 * @param callback - Completion callback
80
 * @returns Original collection
81
 */
82
$.fn.fadeOut(speed, callback);
83

84
/**
85
 * Fade to specific opacity level
86
 * @param speed - Animation duration
87
 * @param opacity - Target opacity (0 to 1)
88
 * @param callback - Completion callback
89
 * @returns Original collection
90
 */
91
$.fn.fadeTo(speed, opacity, callback);
92

93
/**
94
 * Toggle fade animation (in if hidden, out if visible)
95
 * @param speed - Animation duration
96
 * @param callback - Completion callback
97
 * @returns Original collection
98
 */
99
$.fn.fadeToggle(speed, callback);
100
```
101

102
**Usage Examples:**
103

104
```javascript
105
// Basic fade effects
106
$('.modal').fadeIn();
107
$('.notification').fadeOut();
108

109
// With duration and callback
110
$('.overlay').fadeIn(300, function() {
111
  console.log('Overlay shown');
112
});
113

114
$('.alert').fadeOut('slow', function() {
115
  $(this).remove();
116
});
117

118
// Fade to specific opacity
119
$('.image').fadeTo(500, 0.3);
120

121
// Toggle fade
122
$('.details').fadeToggle('fast');
123

124
// Chaining animations
125
$('.element')
126
  .fadeOut('fast')
127
  .delay(1000)
128
  .fadeIn('slow');
129
```
130

131
### Show/Hide with Animation
132

133
Enhanced show/hide methods with optional animation effects.
134

135
```javascript { .api }
136
/**
137
 * Show elements with optional animation
138
 * @param speed - Animation duration (if provided, animates)
139
 * @param callback - Completion callback
140
 * @returns Original collection
141
 */
142
$.fn.show(speed, callback);
143

144
/**
145
 * Hide elements with optional animation
146
 * @param speed - Animation duration (if provided, animates)
147
 * @param callback - Completion callback
148
 * @returns Original collection
149
 */
150
$.fn.hide(speed, callback);
151

152
/**
153
 * Toggle visibility with optional animation
154
 * @param speed - Animation duration (if provided, animates)
155
 * @param callback - Completion callback
156
 * @returns Original collection
157
 */
158
$.fn.toggle(speed, callback);
159
```
160

161
**Usage Examples:**
162

163
```javascript
164
// Instant show/hide (no animation)
165
$('.element').show();
166
$('.element').hide();
167

168
// Animated show/hide
169
$('.panel').show(400);
170
$('.sidebar').hide('fast');
171

172
// With callbacks
173
$('.menu').show(300, function() {
174
  $(this).addClass('visible');
175
});
176

177
// Toggle with animation
178
$('.collapsible').toggle('slow');
179
```
180

181
### Animation Configuration
182

183
Global animation settings and control.
184

185
```javascript { .api }
186
/**
187
 * Animation configuration object
188
 */
189
$.fx; // Main configuration object
190

191
/**
192
 * Disable all animations globally
193
 */
194
$.fx.off; // Set to true to disable animations
195

196
/**
197
 * Animation speed presets
198
 */
199
$.fx.speeds; // {_default: 400, fast: 200, slow: 600}
200

201
/**
202
 * CSS vendor prefix for current browser
203
 */
204
$.fx.cssPrefix; // e.g., '-webkit-', '-moz-', ''
205

206
/**
207
 * Transition end event name for current browser
208
 */
209
$.fx.transitionEnd; // e.g., 'webkitTransitionEnd', 'transitionend'
210

211
/**
212
 * Animation end event name for current browser
213
 */
214
$.fx.animationEnd; // e.g., 'webkitAnimationEnd', 'animationend'
215
```
216

217
**Usage Examples:**
218

219
```javascript
220
// Disable animations globally
221
$.fx.off = true;
222
$('.element').fadeIn(); // Will show instantly
223

224
// Customize speed presets
225
$.fx.speeds.custom = 1500;
226
$('.element').animate({opacity: 0}, 'custom');
227

228
// Check browser capabilities
229
if ($.fx.cssPrefix) {
230
  console.log('Browser prefix:', $.fx.cssPrefix);
231
}
232

233
// Listen for transition end
234
$('.element').on($.fx.transitionEnd, function() {
235
  console.log('Transition completed');
236
});
237
```
238

239
### Easing Functions
240

241
Supported easing options for smooth animations.
242

243
```javascript { .api }
244
// Built-in CSS timing functions:
245
// - 'linear': Constant speed
246
// - 'ease': Slow start, fast middle, slow end
247
// - 'ease-in': Slow start
248
// - 'ease-out': Slow end
249
// - 'ease-in-out': Slow start and end
250
// - Custom cubic-bezier functions
251

252
// Examples:
253
$('.element').animate({left: '100px'}, 500, 'ease-in');
254
$('.element').animate({opacity: 0}, 300, 'cubic-bezier(0.25, 0.46, 0.45, 0.94)');
255
```
256

257
### Animation Chaining
258

259
Combining animations in sequence or parallel.
260

261
```javascript { .api }
262
// Sequential animations (using callbacks)
263
$('.box')
264
  .animate({left: '100px'}, 500, function() {
265
    $(this).animate({top: '100px'}, 500, function() {
266
      $(this).animate({opacity: 0.5}, 300);
267
    });
268
  });
269

270
// Better chaining pattern
271
function animateSequence($element) {
272
  $element
273
    .animate({left: '100px'}, 500)
274
    .animate({top: '100px'}, 500)
275
    .animate({opacity: 0.5}, 300);
276
}
277

278
// Parallel animations on different elements
279
$('.item1').animate({left: '100px'}, 500);
280
$('.item2').animate({right: '100px'}, 500);
281
$('.item3').animate({opacity: 0.5}, 500);
282
```
283

284
### Performance Optimizations
285

286
Best practices for smooth animations.
287

288
```javascript
289
// Use transform for positioning (hardware accelerated)
290
$('.element').animate({
291
  transform: 'translateX(100px) translateY(50px)'
292
}, 500);
293

294
// Prefer transform over left/top
295
// Good: transform: translateX()
296
// Less optimal: left: '100px'
297

298
// Use opacity for fade effects
299
$('.element').animate({opacity: 0}, 300);
300

301
// Batch property changes
302
$('.element').animate({
303
  transform: 'scale(1.2) rotate(45deg)',
304
  opacity: 0.8,
305
  'background-color': '#ff0000'
306
}, 500);
307

308
// Force hardware acceleration
309
$('.element').css('transform', 'translateZ(0)'); // Before animating
310
```
311

312
### Animation Events
313

314
Handling animation lifecycle events.
315

316
```javascript
317
// Listen for transition events
318
$('.element').on('transitionend', function(e) {
319
  console.log('Transition ended:', e.propertyName);
320
});
321

322
// Cross-browser transition end
323
$('.element').on($.fx.transitionEnd, function() {
324
  console.log('Animation completed');
325
});
326

327
// Animation callbacks
328
$('.element').animate({opacity: 0}, 500, function() {
329
  // This callback fires when animation completes
330
  console.log('Fade out completed');
331
  $(this).hide(); // Additional actions
332
});
333
```
334

335
### Complex Animation Examples
336

337
Real-world animation scenarios.
338

339
```javascript
340
// Slide panel animation
341
function slideTogglePanel($panel) {
342
  if ($panel.hasClass('open')) {
343
    $panel
344
      .animate({transform: 'translateX(-100%)'}, 300)
345
      .removeClass('open');
346
  } else {
347
    $panel
348
      .addClass('open')
349
      .animate({transform: 'translateX(0)'}, 300);
350
  }
351
}
352

353
// Staggered list animations
354
$('.list-item').each(function(index) {
355
  $(this).animate({
356
    opacity: 1,
357
    transform: 'translateY(0)'
358
  }, 300, 'ease-out', null, index * 100); // 100ms delay between items
359
});
360

361
// Loading spinner animation
362
function showSpinner() {
363
  $('.spinner')
364
    .show()
365
    .animate({transform: 'rotate(360deg)'}, 1000, 'linear', function() {
366
      // Repeat animation
367
      $(this).css('transform', 'rotate(0deg)');
368
      showSpinner();
369
    });
370
}
371

372
// Modal entrance animation
373
function showModal($modal) {
374
  $modal
375
    .css({
376
      opacity: 0,
377
      transform: 'scale(0.8) translateY(-50px)'
378
    })
379
    .show()
380
    .animate({
381
      opacity: 1,
382
      transform: 'scale(1) translateY(0)'
383
    }, 400, 'ease-out');
384
}
385
```
386

387
### Browser Support
388

389
Animation features and fallbacks.
390

391
```javascript
392
// Modern browsers: CSS transitions
393
// Older browsers: Graceful degradation
394

395
// Check for animation support
396
if ($.fx.cssPrefix !== undefined) {
397
  // CSS transitions supported
398
  $('.element').animate({opacity: 0}, 500);
399
} else {
400
  // Fallback to instant change
401
  $('.element').css('opacity', 0);
402
}
403

404
// Zepto handles vendor prefixes automatically
405
$('.element').animate({
406
  transform: 'rotate(45deg)', // Becomes -webkit-transform, etc.
407
  transition: 'all 0.3s ease'
408
}, 300);
409
```