css:transform,transition,animation总结

sevi_stuo 发布于2019-08-30 15:53 / 2968人阅读

摘要：等同于贝塞尔曲线元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线提供了类似关键帧控制的动画效果，通过属性实现。名称说明用来指定一个关键帧动画的名称，这个动画名必须对应一个规则。

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空间呈现。

名称	说明
flat	2d屏幕
preserve-3d	3d屏幕

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;
}

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;
}

hello world

加上过度效果：

 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;
}

hello world

或者：

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

简写：

animation: anim 5s ease;

混合云专线服务 -transition transit Transition Transitions

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116565.html

10分钟入门 CSS3 Animation

摘要：中文译为转换，但我更倾向于称呼它变形大名鼎鼎的变形金刚叫。意为缩放，顾名思义，是用于改变元素的大小。每个时间点对应一个状态，代表一个关键帧。我们可以在可视化的创建我们自己的贝塞尔曲线。简介 Animation可以让你不用依赖javascript或jquery，用纯CSS在网页中轻松实现各种动画效果。兼容性 animation在绝大部分主流浏览器都得到了很好的支持！还在兼容IE9的同...

Elle 2019-08-02 13:57 评论0 收藏0
【Hello CSS】第九章-如何画一个体验更好的动画？

摘要：那就是重力加速度的表现以及弹力球与空气，地面所产生的摩擦力的表现。弹力球下落时，由于重力加速度的原因，所以速度会越来越大，往上跳时速度会越来越小直至。作者：陈大鱼头 github： KRISACHAN 在上一节中，不走心地画了一些 CSS图案，本节就继续不走心地画动画。 CSS的动画属性在CSS中，animation 、 transition 跟 transform...

BothEyes1993 2019-08-30 15:44 评论0 收藏0
css过度与动画

摘要：综上，上面的代码的值都应该加上，即逐帧动画在实现一个卡通影片或者一个复杂的进度指示框，或者的标志时这种场景比较适应逐帧动画。这种平滑特性不适用于逐帧动画的实现。缓动效果回弹动画效果是比较常见的动画，比如小球的运动、对于尺寸变化和角度变化使用回弹效果可以增强动画的体验。小面介绍一些简单的缓动效果的动画。弹跳动画的实现 css中所有过渡和动画都是跟一条曲线（缓动曲线）有关的，这条曲线...

Kross 2019-08-29 12:36 评论0 收藏0
3D滚动下拉菜单-简直不要太任性

摘要：看到一个很棒的菜单效果，分享一下原文滚动下拉菜单简直不要太任性预览先看看最终效果简介由来最初看到这个是在年月，猛戳这里妙味官网，觉得非常炫。看到一个很棒的菜单效果，分享一下原文 3D滚动下拉菜单-简直不要太任性预览(先看看最终效果) http://runjs.cn/detail/re75abbw 简介(由来) 最初看到这个是在14年5月，猛戳这里：妙味官网，觉得非常炫。想...

ruicbAndroid 2019-08-21 10:26 评论0 收藏0
Python开发【前端篇】HTML5+CSS3

摘要：权重权重权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用权重相同的，后写的样式会覆盖前面写的样式。标签支持格式属性可选第三方播放器CSS权重 CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。权重的等级可以把样式的应用方式分为几个等级，按照等级来计算权重 1、!impo...

番茄西红柿 2019-04-23 13:27 评论0 收藏0