文章插图
2.2、@keyframes关键帧animation 属性定义动画各项运动参数，实际的动画执行的CSS属性通过@keyframes来定义 ， 使用@keyframes建立两个或两个以上关键帧来实现动画帧的样式定义 。
@keyframes animationname{ keyframes-selector { css-styles; }}
- 定一个关键帧动画组，并命名：
@keyframes animation-name {} - 用百分比
%来定动画?。?0%表示开始第一帧样式，可以用别名from代替 。100%表示最后一帧样式，可以用别名to代替 。- 中间可以加其他
%*关键帧 。
- 每一帧里定义需要执行动画变换的CSS样式 。
@keyframes animation-name {0% {background-color: white;width: 150px;}40% { width: 250px; }100% {background-color: #63a9e7;width: 400px;}}2.3、animation-timing-function动画缓动曲线animation-timing-function 用来定义动画执行过程的缓动速度，内置了几个常用的函数定义关键字，及两个关键函数 。同transition 动画中的缓动速度属性 transition-timing-function 是一样的，同母异父的亲兄妹 。- 三次贝塞尔曲线缓动函数：
cubic-bezier(x1, y1, x2, y2)（cubic /?kju?b?k/ 立方），参数其实是两个坐标点，可以通过在线贝塞尔可视化工具编辑和测试 。用来实现动画过程中速度变化曲线的控制，以实现更自然的动画效果 。内置的linear、ease等都是基于贝塞尔曲线函数的 。 - 步骤缓动函数：
steps()，把@keyframes定义的动画帧划分为多段执行，多用来实现图片的逐帧动画效果 。
cubic-bezier(x1, y1, x2, y2)?linear匀速，= cubic-bezier(0.0, 0.0, 1.0, 1.0) animation-timing-function: linear;?ease默认值：低速开始 ， 中间加速，然后低速收尾（ease /i?z/容易，减轻）?ease-in低速开始?ease-out低速结束?ease-in-out低速开始 ， 低速结束steps( n, <jumpterm>)分阶段缓动函数 ， 参数为步数和变化点 。可实现时钟指针动画animation-timing-function:steps(6);
文章插图
2.4、动画事件用于监听动画的开始、循环、结束的动画事件 AnimationEvent
事件描述animationstart动画开始animationend动画完成animationiteration动画循环
<script>const node = document.querySelector('.div-abox');node.addEventListener('animationend', (e) => {console.log(e.animationName, e.type, e.elapsedTime);//box-line-ani animationend 1})</script>参考资料- 入浅出 CSS 动画
- CSS3 3D transform变换
?版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！推荐阅读
- 2 CSS布局秘籍-6脉神剑
- 1 CSS布局秘籍-任督二脉BFC/IFC
- 简易版 纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码
- CSS选择器大全48式
- 常用CSS样式属性
- 现代 CSS 指南 -- at-rule 规则扫盲
- CSS基础知识筑基
- CSS 动画一站式指南
- 为什么CSS中的calc函数可能会不生效？
- day03-CSS
