Animation动画

2025-04-29 00:10:59首发，16小时前更新

展示本框架所继承的css动画，能满足日常使用。

Animation动画16小时前更新

前言

动画是CSS3中的重要组成部分，相比JS动画，CSS3动画更流畅更兼容，现代网页为了体现新潮酷炫少不了用上几个动画效果。本框架已经内置若干常用动画，可直接引用，不需要另外加载其他第三方动画库。

简单使用

Dom元素只要包含动画名便可运行动画，比如说让元素渐显则需要使用class="_fadeIn"。

输出
HTML
JS

伟大的中国
```
                
                
            
```

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

进场退场动画

为了呈现良好的仪式感，通常会使用渐变类的动画进场或退场，以下罗列本框架所有的进场和退场动画。

进场动画：fadeIn、fadeInUp、fadeInDown、fadeInStart、fadeInEnd 、springIn、scaleIn，flyInStart，flyInEnd，flyInUp，flyInDown，rotateIn

退场动画：fadeOut、fadeOutUp、fadeOutDown、fadeOutStart、fadeOutEnd 、springOut、scaleOut,flyOutStart，flyOutEnd，flyOutUp，flyOutDown，rotateOut

具体用法就是简单的给元素加上动画类即可，比如class="_fadeIn"

输出
HTML
JS

当前的动画名是：无

伟大的中国
```
                
                
            
```

                
                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;
                        }
                    }
                });

强调动画

为了表示突出或者强调，通常会在页面放置一些在一个位置不变的静态动画。

具体用法就是简单的给元素加上动画类即可，比如class="_bounceShow"。

_bounceShow:上下弹跳两下，类似弹跳的弹珠
_flashShow:忽隐忽现闪两下，类似灯光闪烁
_pulseShow:由小及大两下，类似心跳效果
_shakeShow:左右快速移动，类似发抖效果

输出
HTML
JS

当前的动画名是：无

伟大的中国
```
                
                
            
```

                
                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;
                        }
                    }
                });

旋转动画

在动态展示或箭头旋转中常用到旋转动画，以下列举本框架所使用的常用旋转方式。

具体用法就是简单的给元素加上动画类即可，比如class="ax-rotate180"。

_rotate360:顺时针旋转360度
_rotate-360:逆时针旋转360度
_rotate180:顺时针旋转180度
_rotate-180:逆时针旋转180度
_rotate90:顺时针旋转90度
_rotate-90:逆时针旋转90度
_rotate45:顺时针旋转45度
_rotate-45:逆时针旋转45度

注意，以上动画中除了_rotate360和_rotate-360动画是animation类型动画，其他的是transmition类型动画。

animation动画使用@keyframes构建的；而transmition动画是通过transform构建的。

输出
HTML
JS

当前的动画名是：无

伟大的中国
```
                
                
            
```

                
                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;
                        }
                    }
                });

速度

本框架内置了9种速度，对animation动画和transmition动画有效。

_dur-1：100ms
_dur-2：200ms
_dur-3：300ms
_dur-4：600ms
_dur-5：900ms
_dur-6：2000ms
_dur-7：3000ms
_dur-8：4000ms
_dur-9：5000ms

使用方法则是在元素具备动画类名基础上，追加速度类名，比如class="_fadeIn _dur-5"。

输出
HTML
JS

当前的动画名是：无

伟大的中国
```
                
                
            
```

                
                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;
                        }
                    }
                });

循环

循环包含有限循环和无限循环，实现无限循环的方式有两种：

使用固定样式类
- _circle360：顺时针无限循环
- _circle-360：逆时针无限循环
对_rotate360和_rotate-360动画追加_loop-inf样式类

有限循环则提供了_loop-1~9的样式类实现1~9圈的有限循环。

输出
HTML

伟大的中国

伟大的中国

伟大的中国

伟大的中国
```
                
                
            
```