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

1.2、transform变换transform 可实现元素的各种图形变换，如缩放、旋转，及3D的变换，（transform/tr?ns?f??rm/变换）。transform 本身并不是动画，不过常用来配合transition来实现各种炫酷的变换动画效果。
transform变换函数描述示例transform元素变换，值支持下面这些函数，可设置多个值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多次执行时可以使用交替运行