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

transform: skew(30deg) rotate(60deg);translate(x, y)位移变换，x、y方向的移动，可负数。扩展函数translateX()、translateY()，其他变换函数类似transform: translateY(100);（ translate /tr?nz?le?t/ 变化、移动）scale(x, y)缩放变换，1为100%原始大小transform: scaleX(2);rotate(angle)旋转，参数单位为角度deg，（rotate/r???te?t/）transform: rotate(30deg);skew(x, y)元素倾斜，单位为角度deg（ skew /skju?/ 倾斜）transform: skew(-60deg,0);translate3d(x,y,z)3D的位置变换，指定x、y、z坐标轴的偏移距离transform: translate3d(100px,0,0);scale3d(x,y,z)3D的缩放变换，指定x、y、z坐标轴的缩放值transform: scale3d(2,1.2,1);rotate3d(x,y,z,angle)3D旋转，指定x、y、z坐标轴transform: rotateX(180deg);matrix()基于X轴和Y轴矩阵变换（/?me?tr?ks/矩阵）其他变换相关属性transform-origin元素中心坐标，默认centertransform-origin: 150px 50px;perspective3D变换的透视视角，在父元素上设置 /p?r?spekt?v/perspective: 500px;3D坐标系的手势图：

文章插图

<div><button onclick="active()">动起来</button><p class="goodstudy">好好学习</p><p class="ddup">天天向上</p></div><style>.ddup{background-color: #0cdb39;width: 100px;height: 100px;line-height: 100px;text-align: center;transition: all 1s ease-out;transform: skew(-30deg);}.ddup:hover{transform: translateX(-30px);/* transform只有一个生效，被后面的覆盖了*/transform: rotateX(180deg);/* 围绕x轴3d旋转*/}</style>

文章插图
02、animation帧动画CSS 动画 animation帧动画，动画的实际CSS样式是由 @keyframes 规则实现的，animation属性负责设置动画的各项运动参数。
2.1、animationanimation 属性/值描述示例/备注animation动画组合简写属性，包括下面这些小弟是有顺序的，支持多组动画，逗号隔开animation-name*必填，指定由@keyframes定义的动画序列名称@keyframes animation-name {}animation-duration*必填，动画时长，单位s、msanimation-duration: 2.5sanimation-iteration-count动画循环次数(1)，infinite无限循环（/??nf?n?t/无限）animation-iteration-count: 3;animation-timing-function设置动画速度变化函数，提供了函数、预置函数关键字animation-timing-function: linear;?linear、ease、...预置的函数关键字定义，默认ease?cubic-bezier()三次贝塞尔曲线函数，参数为两个坐标点，在线工具cubic-bezier(x1, y1, x2, y2)animation-fill-mode动画执行元素样式应用方式，默认none ，动画执行完成后恢复到原来的样式。animation-fill-mode: forwards;● forwards：动画后保留最后一帧的样式● backwards：立刻应用第一帧样式，包括animation-delay延迟时间生效● both：forwards+backwards，全都要！animation-delay动画延时时长，默认0s立即执行，可为负数animation-delay: 2s;animation-direction播放方向方式，默认normal 。animation-iteration-count多次执行时可以使用交替运行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>