css动画

animation

属性	描述
@keyframes	规定动画
animation-name	定义动画的名称
animation-duration	指定动画完成时间
animation-timing-function	设置动画的速度曲线
animation-delay	指定动画的延迟时间
animation-iteration-count	设置动画的执行次数
animation-direction	设置动画的执行方向
animation-fill-mode	设置动画结束或开始或延迟时的样式
animation-play-state	设置动画的开始和结束

语法
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;

值	描述
linear	动画的速度是相同的
ease	动画以低速开始，然后加快，在结束前变慢。默认值
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义速度函数。可能的值是从 0 到 1 的数值。

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

animation-iteration-count

语法
animation-iteration-count: value;

值	描述
n	动画的播放次数，默认为1
infinite	指定动画无限循环播放

animation-direction

语法
animation-direction: value;

值	描述
normal	默认值，动画正常播放
reverse	动画反向播放
alternate	动画在奇数次正向播放，偶数次反向播放
alternate-reverse	动画在奇数次反向播放，偶数次正向播放

简单的例子

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;

值	描述
none	默认值，动画样式为：初始定义样式-帧样式（from-to）-初始样式
forwards	动画反向播放
backwards	动画样式为：帧样式（from-to）-初始定义样式
both	兼顾forwards与backwards，动画一直是帧规定的样式

利用animation实现轮播图

效果图

轮播图

思路

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

@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;

属性	描述
none	不进行变换
rotate	旋转
translate	移动
scale	放大
skew	扭曲
matrix	矩阵

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	设置过渡效果的css属性名称
transition-duration	完成过渡效果需要的时间
transition-timing-function	速度曲线
transition-delay	过渡效果何时开始

transition-property

值	描述
none	没有过渡动画
all	所有可被动画的属性
IDENT	属性名称（可多个）

其余属性与animation中的类似

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