animation

语法
animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画不播放样式 动画开始与结束;

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

@keyframes name {
  //from to分别是0% 100%，之间的百分值代表各个帧
  25% {
    //效果
  }
  50% {
    //效果
  }
  75% {
    //效果
  }
}

animation-timing-function

语法
animation-timing-function: value;

在线调试贝塞尔曲线链接：cubic-bezier

animation-iteration-count

语法
animation-iteration-count: value;

animation-direction

语法
animation-direction: value;

简单的例子

direction示例图

@keyframes heart {
            to {
                transform: scale(2);
            }
        }

从左至右，animation-direction分别为normal reverse alternate alternate-reverse，normal的处理效果是将图形慢慢放大到两倍，然后一下子回到初始状态，reverse效果相反，alternate是将图形慢慢放大再慢慢回到初始状态，alternate-reverse与之相反。这就是direction的四个方向。

animation-fill-mode

语法
animation-fill-mode: value;

利用animation实现轮播图

效果图

轮播图

思路

1. 将所有图片并排水平放置，设置overflow: hidden;
2. 定义轮播动画，在两个帧之间保持transform: translateX();不变实现图片滑动暂停的效果
3. 文字和小点的变换原理类似

@keyframes change{
            0% {
                transform: translateX(0px);
            }
            20% {
                transform: translateX(0px);
            }
            25% {
                transform: translateX(-800px);
            }
            45% {
                transform: translateX(-800px);
            }
            50% {
                transform: translateX(-1600px);
            }
            70% {
                transform: translateX(-1600px);
            }
            75% {
                transform: translateX(-2400px);
            }
            95% {
                transform: translateX(-2400px);
            }
            100% {
                transform: translateX(-3200px);
            }
        }

结合js实现弹幕

效果图

弹幕

js部分：

/**
     * 获取指定范围的随机数
     * @param {*开始} start 
     * @param {*技术} end 
     */
     function Random(start, end) {
        let num = (Math.random() * (end - start) + start).toString();
        return parseInt(num, 10);
    }


    /**
     * 添加一个弹幕
     * @param {*内容} text 
     */
    function SetBarrage(text) {
        // 创建dom并添加class 和各种数据
        var barrage = document.createElement('span');
        // console.log(barrage);
        barrage.className = "barrage-info";
        barrage.innerText = text;
        document.getElementById('screen').appendChild(barrage);
        // 创建弹幕从右到左面的10-15的随机秒数
        const randomTime = Random(5, 15);
        // 创建离上方的距离  百分比 现在是半屏
        const randomTop = Random(15, 40);
        barrage.style.top = randomTop + "%";
        barrage.style.animation = "barrage " + randomTime + "s linear";
        // 添加一个定时器 在运行完成之后删除这个DOM
        setTimeout(() => {
            document.getElementById('screen').removeChild(barrage)
        }, randomTime * 1000);
    }

    // 绑定发送弹幕按钮
    document.getElementById("send").onclick = function (e) {
        SetBarrage(document.getElementById("input_barrage").value);
    }

注：不存在中间值的内容则无动画，如border由solid变为dotted无中间值，则会在最后一刻进行改变。

transform

语法
transform: none|transform-functions;

matrix与矩阵对应，可表示2d和3d转换，利用matrix可实现其余效果。

.demo {
  transform: matrix(a, b, c, d, e, f);
}

矩阵图

2d转换由3*3矩阵表示，第一行代表x轴变化，第二行代表y轴，第三行代表z轴，2d与z轴无关，使用 0 0 1

rotate

旋转影响a b c d四个值

transform: rotate(0deg)
a=cos0
b=sin0
c=-sin0
d=cos0

translate

平移对应的是矩阵中的e f

transform: translate(10, 20);
e = 10
f = 20

trandform: matrix(a, b, c, d, 10, 20);

scale

缩放对应的是矩阵中的a d

transform: scale(1.2, 0.8)
a = x
d = y

transform: matrix(1.5, 0, 0, 0.8, 0, 0)

skew

偏移对应的是矩阵中的c b

transform: skew(20deg, 30deg)
b = tan30°
c = tan20°

transform: matrix(a, tan30°, tan20°, d, e, f)

用matrix表示各种效果的叠加时需要用到矩阵的乘法，每种效果都可以得到一个矩阵，各个矩阵相乘的结果就是叠加效果

矩阵相乘

transition

语法
transition: property duration timing-function delay;

transition-property

其余属性与animation中的类似

常用的动画库：
Animate.css
Hover.css
Anime.js