Animation

Last updated: 16 days ago

Category: Basic

Displays the CSS animations integrated in this framework, including transition animations and keyframe animations, which can meet daily usage needs.

Animation16 days ago

Introduction

Animation is a key component of CSS3. Compared to JavaScript animations, CSS3 animations are smoother, more compatible, and perform better. Modern websites often use animation effects to create trendy and dynamic experiences. This framework includes several commonly used animations that can be directly referenced without loading third-party animation libraries.

Basic Usage

DOM elements will run animations when they contain animation class names. For example, use class="_fadeIn" to make an element fade in.

Output
HTML
JS

Hello World
```
                
                
            
```

                
                btn01.onclick = ()=>{
                    let box =  document.querySelector('#box01');
                   box.classList.toggle('_fadeIn');
                }

Entrance and Exit Animations

For better visual effects, fade animations are typically used for entrances and exits. Below are all entrance and exit animations included in this framework.

Entrance animations:
fadeIn, fadeInUp, fadeInDown, fadeInStart, fadeInEnd, springIn, scaleIn, flyInStart, flyInEnd, flyInUp, flyInDown, rotateIn

Exit animations:
fadeOut, fadeOutUp, fadeOutDown, fadeOutStart, fadeOutEnd, springOut, scaleOut, flyOutStart, flyOutEnd, flyOutUp, flyOutDown, rotateOut

Simply add the animation class to elements, e.g. class="_fadeIn"

Output
HTML
JS

The current animation name is: None

Hello World
```
                
                
            
```

                
                let box02 = document.querySelector('#box02'),
                    name02 = document.querySelector('#name02');
                box02.addEventListener('animationend', function() {
                    this.setAttribute('class', 'ani');
                }, false);
                document.querySelectorAll('[class*="add-"]').forEach(function(item) {
                    if (item.getAttribute('class').indexOf('add-') != -1) {
                        item.onclick = function() {
                            let aniName = item.getAttribute('class').match(/\add-(\S*)/)[1];
                            box02.setAttribute('class',`ani _${aniName}`)
                            name02.innerHTML = '_' + aniName;
                        }
                    }
                });

Emphasis Animations

To highlight or emphasize elements, static animations that remain in a fixed position are often placed on the page.

The usage is simple—just add an animation class to the element, such as class="_bounceShow".

Class	Description	Example Reference
`_bounceShow`	Bounces up and down twice, like a bouncing ball.	Similar to a bouncing marble.
`_flashShow`	Flickers in and out twice, like a flashing light.	Similar to a blinking light.
`_pulseShow`	Expands and contracts twice, resembling a heartbeat effect.	Similar to a pulsing effect.
`_shakeShow`	Shakes rapidly left and right, resembling a trembling effect.	Similar to a shivering motion.

Output
HTML
JS

The current animation name is: None

Hello World
```
                
                
            
```

                
                let box03 = document.querySelector('#box03'),
                    name03 = document.querySelector('#name03');
                box03.addEventListener('animationend', function() {
                    this.setAttribute('class', 'ani');
                }, false);
                document.querySelectorAll('[class*="ani-"]').forEach(function(item) {
                    if (item.getAttribute('class').indexOf('ani-') != -1) {
                        item.onclick = function() {
                            let aniName = item.getAttribute('class').match(/\ani-(\S*)/)[1];
                            box03.setAttribute('class',`ani _${aniName}`)
                            name03.innerHTML = '_' + aniName;
                        }
                    }
                });

Rotation Animations

Rotation animations are commonly used for dynamic displays or arrow rotations. Below are the standard rotation methods implemented in this framework.

Simply add the animation class to the element, e.g., class="_rotate180".

Class	Description	Animation Type
`_rotate360`	360° clockwise rotation	`@keyframes`
`_rotate-360`	360° counter-clockwise rotation	`@keyframes`
`_rotate180`	180° clockwise rotation	`transform`
`_rotate-180`	180° counter-clockwise rotation	`transform`
`_rotate90`	90° clockwise rotation	`transform`
`_rotate-90`	90° counter-clockwise rotation	`transform`
`_rotate45`	45° clockwise rotation	`transform`
`_rotate-45`	45° counter-clockwise rotation	`transform`

Notes:

Only _rotate360 and _rotate-360 use @keyframes-based animations.
All others are transform-based transition animations.
@keyframes animations are constructed using CSS keyframes.
Transition animations are built using CSS transform properties.

Output
HTML
JS

The current animation name is: None

Hello World
```
                
                
            
```

                
                let box04 = document.querySelector('#box04'),
                    name04 = document.querySelector('#name04');
                box04.addEventListener('animationend', function() {
                    this.setAttribute('class', 'ani');
                }, false);
                box04.addEventListener('transitionend', function() {
                    this.setAttribute('class', 'ani');
                }, false);
                document.querySelectorAll('[class*="spin-"]').forEach(function(item) {
                    if (item.getAttribute('class').indexOf('spin-') != -1) {
                        item.onclick = function() {console.log(item,item.getAttribute('class'))
                            let aniName = item.getAttribute('class').match(/\pin-(\S*)/)[1];
                            box04.setAttribute('class',`ani _${aniName}`)
                            name04.innerHTML = '_' + aniName;
                        }
                    }
                });

Animation Speed

This framework includes 20 predefined speed classes that work for both animation and transition effects.

Class	Duration	Example Usage
`_dur-0`	0ms	Instantaneous effect
`_dur-1`	100ms	Very fast animation
`_dur-2`	200ms
`_dur-3`	300ms
`_dur-4`	400ms
`_dur-5`	500ms	moderate speed
`_dur-6`	600ms
`_dur-7`	700ms
`_dur-8`	800ms
`_dur-9`	900ms
`_dur-10`	1s	Standard slow animation
`_dur-20`	2s
`_dur-30`	3s
`_dur-40`	4s
`_dur-50`	5s	Very slow, dramatic effect
`_dur-60`	6s
`_dur-70`	7s
`_dur-80`	8s
`_dur-90`	9s
`_dur-100`	10s	Extremely slow transition

Usage: Add the speed class alongside your animation class, e.g., class="_fadeIn _dur-5" for a fade-in effect with 500ms duration.

Note: All duration classes are compatible with both CSS @keyframes animations and transform transitions.

Output
HTML
JS

The current animation name is: None

Hello World
```
                
                
            
```

                
                let box05 = document.querySelector('#box05'),
                    name05 = document.querySelector('#name05');
                box05.addEventListener('animationend', function() {
                    this.setAttribute('class', 'ani');
                }, false);
                document.querySelectorAll('[class*="speed-"]').forEach(function(item) {
                    if (item.getAttribute('class').indexOf('speed-') != -1) {
                        item.onclick = function() {
                            let aniName = item.getAttribute('class').match(/\peed-(\S*)/)[1];
                            box05.setAttribute('class',`ani _scaleIn _${aniName}`)
                            name05.innerHTML = '_' + aniName;
                        }
                    }
                });

Looping Animations

Looping includes finite and infinite loops. There are two ways to implement infinite loops:

Using fixed classes:
- _circle360: Infinite clockwise rotation
- _circle-360: Infinite counter-clockwise rotation
Adding _loop-inf to _rotate360 and _rotate-360 animations

Finite loops are implemented with _loop-1~10 classes for 1-10 loops.