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
