css:transform,transition,animation总结

2024年1月4日 93次阅读 来源: 长空

1. transform 2d

名称说明
transform变形功能
transform-orign指定变换起点

1.1 transform的属性值

名称说明参数
translate/translateX/translateY平移长度值或百分数
scale/scaleX/scaleY缩放数值
rotate旋转角度
skew倾斜角度
matrix矩阵略

例子：

 transform: translateX(100px);
 transform: translateX(50%);

 transform: scale(2);
 transform: scale(0.5);

 transform: rotate(45deg);顺时针

 transform: skew(45deg,45deg);// 水平方向(0-90有意义) 竖直方向(0-90有意义)

附skew资料：CSS3 transform matrix矩阵与拉伸实例页面

多重效果并行：只是效果，没有过程，不存在线行：

transform: scale(0.5) rotate(45deg);

1.2 transform-orign

默认是中心点。可以设其他值。第一个参数是x轴，其值可以是left,center,right,也可以是百分数。第二个参数是y轴，其值可以是top,center,bottom，也可以使百分数。

例子：

transform-origin: 0 0;
transform-origin: left top;
transform-origin: 50% 50%;

2. transform 3d

名称说明
transform-style展现样式(flat/perserve3d)
perspective指定变换起点

2.1 transform

3d就是多了一个z轴。transfrom的属性值比2d多以下：

名称说明参数
translate3d(x,y,z)/translateZ(z)平移长度值或百分数
scale3d(x,y,z)/scaleZ(z)缩放数值
rotateX(x)/rotate(y)/rotateZ(z)旋转角度
matrix3d矩阵略

2.2 transform-style

指定嵌套元素如何在3d空间呈现。

名称说明
flat2d屏幕
preserve-3d3d屏幕

2.3 perspective

指眼睛距离3d元素的距离。

名称说明
none默认值，表示无限的角度来看 3D 物体，但看上去是平的
长度值接受一个长度单位大于0的值，其单位不能为百分比。值越大，角度出现的越远，就好比你人离远一点看物体。值越小，正相反。

2.4 perspective-origin

变型基点，同transform-origin

例子：

p{
    width: 200px;
    height: 200px;
    background-color: gray;
}
p.b{
    transform: translate3d(100px,100px,-200px);
}
div{
    perspective: 1000px;
    transform-style: preserve-3d;
}
<div>
    <p class="b"></p>
</div>

3. transition

过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如： :hover、 :focus、
:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能，主要属性如
下表：

名称说明参数
transition-property指定CSS 属性none,all,指定属性
transition-duration所需时间1s,2s
transition-timing-function过程函数ease,linear,ease-in,ease-out,ease-in-out
transition-delay延时1s,2s
transition以上四种简写

没有过渡效果的例子：

div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;
}
div:hover{
    background-color: green;
    color: white;
}

<div><h1>hello world</h1></div>

加上过度效果：

 div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease;
}

简写形式：

transition: all 2s ease;
名称说明
linear元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0)
ease-in元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,1.0, 1.0)
ease-out元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,1.0)
linear元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease-in-out元素样式从初始状态过渡到终止状态时，先加速，再减速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

4. animation

CSS3 提供了类似 Flash 关键帧控制的动画效果，通过 animation属性实现。那么之前的 transition属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。

animation 实现动画效果主要由两个部分组成：

1.通过类似 Flash 动画中的关键帧声明一个动画；
2.在 animation 属性中调用关键帧声明的动画。
名称说明
animation-name用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes规则。CSS 加载时会应用 animation-name 指定的动画，从而执行动画。
animation-duration用来设置动画播放所需的时间
animation-timing-function用来设置动画的播放方式
animation-delay用来指定动画的延迟时间
animation-iteration-count用来指定动画播放的循环次数
animation-direction用来指定动画的播放方向
animation-play-state用来控制动画的播放状态
animation-fill-mode用来设置动画的时间外属性
animation以上的简写形式

代码：

@keyframes anim {
    0%,100% {
        background-color: maroon;
        color: gray;
    }
    50% {
        background-color: black;
        color: white;
    }
}
div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;
}
div:hover{
    animation-name: anim;
    animation-duration: 5s;
}

<div><h1>hello world</h1></div>

或者：

@keyframes anim {
    from {
        background-color: maroon;
        color: gray;
    }
    to {
        background-color: black;
        color: white;
    }
}

简写：

animation: anim 5s ease;
    原文作者：长空
    原文地址: https://segmentfault.com/a/1190000008580315
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞