CSS动画 transition和animation
目录
动画概念词解释
css动画transition
特点
js事件监听
代码示例
css动画animation
特点
js事件监听
代码示例
动画概念词解释
- 屏幕刷新率 显示器每秒绘制图形的次数，单位为赫兹(Hz)，大多数为60Hz，每帧预计时间 1 / 60 = 16.6毫秒。
- 卡顿 浏览器无法在一帧内完成工作，则可能导致跳帧，内容在屏幕上抖动、卡顿。
- 跳帧 浏览器分别在16ms，32ms，48ms，分别切帧。如果到了32ms准备切帧的时候，浏览器其他任务还未完成，没有执行动画切帧。等恢复动画切帧时，浏览器到了48ms的动画切帧，显示器直接从16ms跳转48ms处画面，则发生跳帧。
css动画transition
需要提供起始和结束两个关键帧，浏览器才能够完成样式差异比对并计算出对应的过渡动画
特点
- 由于需要根据差异对比计算，所以只支持可识别中间值的属性（如大小，颜色，位置，透明度等 ），如display属性则不支持。
- 由于首次渲染只有一个关键帧，浏览器无法进行样式差异对比，所以首屏渲染时transition一般不生效
js事件监听
- transitionrun css过渡动画触发之前
- transitionstart css过渡动画触发之后
- transitionend css过渡动画结束
代码示例
div {
opacity: 1;
transition: opacity, 3s;
}
div:hover {
opacity: 0.5;
}
css动画animation
不能配置动画的实际表现，动画的实际表现由@keyframes规则实现
特点
- 可以在起始帧和结束帧之间自定义中间帧，使得动画更加平滑过渡，对动画有了更好的控制和自定义能力
- 通过animation-timing-function: steps() 属性实现了transition无法具备的逐帧动画效果
- 定义了结束帧(@keyframes中的to)，在首屏渲染时，它默认会以指定元素在动画开始时刻的样式作为起始关键帧，并结合to定义的结束帧和指定元素animation其他 参数来完成 动画 的计算和动画帧的绘制
js事件监听
- animationstart 动画开始时触发
- animationiteration 动画的迭代结束，另一个迭代开始时触发
- animationend 动画完成时触发
代码示例
p {
animation: 3s infinite alternate slidein;
}
@keyframes slidein {
0% {
margin-left: 100%;
width: 300%;
}
100% {
margin-left: 0%;
width: 100%;
}
}