CSS动画-transition/animation( 三 ) _生活百科

alternate● alternate：动画交替反向运行，结合多次● reverse：反向播放动画● alternate-reverse：反向交替运行animation-play-state动画运行状态，running、paused，可用来控制动画animation-play-state: paused;

简写属性：animation: name duration timing-function delay iteration-count direction fill-mode play-state

<div class="div-abox">断肠人在天涯</div><style>.div-abox {padding: 4px;width: 150px;background-color: red;animation-delay: 1s;animation-duration: 1s;animation-name: box-line-ani;animation-direction: alternate;/*动画交替反向运行*/animation-iteration-count: infinite;/*无限重复*/animation-fill-mode: both;animation-timing-function: cubic-bezier(.4, .52, .93, .4);/*animation 简写属性*/animation: box-line-ani 1.5s alternate 4 cubic-bezier(.4, .52, .93, .4) both;}.div-abox:hover {/* 鼠标悬浮时运动加速 */animation-duration: 0.5s;}@keyframes box-line-ani {0% {background-color: white;width: 150px;}40% { width: 250px; }100% {background-color: #63a9e7;width: 400px;}}</style>

文章插图
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定义的动画帧划分为多段执行，多用来实现图片的逐帧动画效果。

animation-timing-function描述示例/补充cubic-bezier(x1, y1, x2, y2)三次贝塞尔曲线函数，参数为两个坐标点，在线工具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);