一、过渡（transition）

1、CSS过渡的概念

CSS 过渡是指在设置的时间内来平滑的改变属性值，和动画animation有类似效果，但是细节上有很大不同。

2、transition相关属性

①transition-property属性

用于指定应用过渡效果的CSS属性的名称。
基本语法格式：

transition-property: none | all | property;

属性值
- none：没有属性会获得过渡效果。
- all：所有属性都将获得过渡效果。
- property：定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。

②transition-duration属性

用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。
基本语法格式：

transition-duration:time;

③transition-timing-function属性

规定过渡效果的速度曲线，默认值为“ease“。
基本语法格式：

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值
- ease：指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1)。
- linear：指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1))。
- ease-in：指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1)。
- ease-out：指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1)。
- ease-in-out：指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1)。
- cubic-bezier(n,n,n,n)：定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。

④transition-delay属性

规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。
基本语法格式：

transition-delay:time;

正数:过渡动作会延迟触发。
负数：过渡动作会从该时间点开始，之前的动作被截断。

⑤transition属性

是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。
基本语法格式：

transition：property duration timing-function delay;

注意：
- 使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。
- 无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。

3、CSS过渡的简单实例

代码如下：

<style>h1{color: red;font-size: 20px;}.test{list-style: none;}.test li{width: 170px;height: 100px;margin: 0;padding: 0;border: 1px solid black;background-color: blanchedalmond;color: rgb(175, 174, 174);transition-duration: 2s;transition-property: border-color,background-color,color;transition-timing-function: ease-in;}.test li:hover{border-color: rgb(212, 212, 212);background-color: lightgrey;color: rgb(36, 33, 33);}</style><body><h1>请将鼠标移动到下面的矩形上：</h1><div class="c1"><ul class="test"><li>本次过渡设置的属性：border-color，background-color，color</li></ul></div></body>

二、变形（transform）

1、CSS变形的概念

CSS 变形用于对元素进行旋转、缩放、移动或倾斜，和动画animation没什么关系，主要是设置元素的“外表”。
基本语法格式：

transform：none | transform-functions;

transform-function函数
- matrix（）：定义矩形变换，即基于X和Y坐标重新定位元素的位置。
- translate（）：移动元素对象，即基于X和Y坐标重新定位元素。
- scale（）：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。
- rotate（）：旋转元素对象，取值为一个度数值。
- skew（）：倾斜元素对象，取值为一个度数值。

2、2D转换

①平移

使用translate（）方法能够重新定义元素的坐标，实现平移的效果。
基本语法格式：

transform:translate(x-value,y-value);

x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。

②缩放

scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。
基本语法格式：

transform:scale(x-axis,y-axis);

x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。

③倾斜

skew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。
基本语法格式：

transform:skew(x-angle,y-angle);

参数x-angle和y-angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。

④旋转

rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。
基本语法格式：

transform:skew(x-angle,y-angle);

参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。

3、3D转换

①rotateX()

rotateX()函数用于指定元素围绕X轴旋转。
基本语法格式：

transform:rotateX(a);

参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。

②rotateY()

rotateY()函数指定一个元素围绕Y轴旋转。
基本语法格式：

transform:rotateY(a);

参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。

③rotate3D()

在三维空间里，除了rotateX()、rotateY()和rotateZ()函数可以让元素在三维空间中旋转之外，还有一个rotate3d()函数。
基本语法格式：

rotate3d(x,y,z,angle);

x、y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0。Angle为要旋转的角度。

④perspective属性

perspective属性可以简单的理解为视距，主要用于呈现良好的3D透视效果。例如我们前面设置的3D旋转果并不明显，就是没有设置perspective的原因。
基本语法格式：

perspective:参数值;

perspective属性参数值可以为none或者数值（一般为像素），其透视效果由参数值决定，参数值越小，透视效果越突出。

4、CSS变形的简单实例

代码如下：

<style>h1{font-size: 20px;}#d1{width: 100px;height: 100px;background-color: lightgrey;transform: matrix(0,1,1,1,10,10);}#d2{width: 100px;height: 100px;background-color: lightgrey;/* transform: translate(80px,30px); */}#d3{width: 100px;height: 100px;background-color: lightgrey;transform: translate(80px,30px);}#d4{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: rotate(10deg);}#d5{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: rotate(-10deg);}#d6{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: scale(1.2);}#d7{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: scale(2,1.5);}#d8{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: scale(-2,-1.5);}#d9{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: skew(10deg);}#d10{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: skew(-10deg);}#d11{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: skew(-10deg,10deg);}#d12{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: rotate3d(0)}#d13{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: rotate3d(1,0,0.5,30deg)}#d14{width: 100px;height: 100px;margin-left: 20px;background-color: lightgrey;transform: rotate3d(0,0,0.5,30deg);}</style><body class="c1"><h1>矩阵变换</h1><br><br><div id="d1"></div><h1>平移</h1><div id="d2"></div><div id="d3"></div><h1>旋转</h1><div id="d4"></div><br><br><div id="d5"></div><h1>缩放</h1><div id="d6"></div><br><br><div id="d7"></div><br><br><br><br><br><div id="d8">哈哈哈哈</div><br><br><h1>斜切扭曲</h1><div id="d9"></div><br><br><div id="d10"></div><br><br><div id="d11"></div><br><br><br><h1>3D转换</h1><div id="d12"></div><br><br><div id="d13"></div><br><br><div id="d14"></div><br><br><br></body>

浏览器效果可以自己看一下。

三、过渡和变形的区别

①过渡用到的属性是transition，而变形用到的属性是transform。

②过渡是指元素变化的整个过程，更加强调期间经过的过程；而变形是指从一种形状变为另一种形状，更加强调变化前后的区别。例如树苗成为参天大树是变形（transform），而小树苗在长成参天大树这期间的过程就是过渡（transition）。换言之，过渡是针对元素的属性进行的改变，而变形是针对整个元素进行的改变。

③过渡变化的中心点默认是对象的左上角，不能改变；而变形能够设置对象的中心点。

④过渡可以设置过渡时间、曲线以及延迟等；而变形不能设置这些参数，变形是瞬间完成的变化。

四、动画（animation）

1、CSS动画的概念

CSS 动画是CSS动画属性，CSS可以直接实现HTML元素的动画效果，而不是用JavaScript或者Flash。

2、animation相关属性

①@keyframes

在CSS3中，@keyframes规则用于创建动画。
基本语法格式：

@keyframes animationname {keyframes-selector{css-styles;}}

animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。
css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

②animation-name属性

用于定义要应用的动画名称。
基本语法格式：

animation-name: keyframename | none;

animation-name 属性初始值为none，适用于所有块元素和行内元素。keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。

③animation-duration属性

用于定义整个动画效果完成所需要的时间，以秒或毫秒计。
基本语法格式：

animation-duration: time;

animation-duration 属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。

④animation-timing-function属性

用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。
基本语法格式：

animation-timing-function:value;

animation-timing-function包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。

⑤animation-delay属性

用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。
基本语法格式：

animation-delay:time;

参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。animation-delay属性适用于所有的块元素和行内元素。

⑥animation-iteration-count属性

用于定义动画的播放次数。
基本语法格式：

animation-iteration-count: number | infinite;

animation-iteration-count属性初始值为1，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是infinite，则指定动画循环播放。

⑦animation-direction属性

定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。
基本语法格式：

animation-direction: normal | alternate;

animation-direction 属性初始值为normal，适用于所有的块元素和行内元素。该属性包括两个值，默认值normal表示动画每次都会正常显示。如果属性值是"alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等）逆向播放。

⑧animation属性

是一个简写属性，用于综合设置以上六个动画属性。
基本语法格式：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。

3、CSS动画的简单实例

①一个简单的文字动画

代码如下：

<style>span{display: block;height: 50px;font: bold 14px;}#d1{transform: translate(55px);animation: dd1 2s ease-out;}@keyframes dd1{0%{transform: translate(0);opacity: 0;}50%{transform: translate(30px);opacity: 1;}70%{transform: translate(35px);opacity: 1;}100%{transform: translate(60px);opacity: 0;}}</style><body><div><span id="d1">哈哈哈哈哈哈哈哈哈哈哈哈</span><span id="d2">嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</span><span id="d3">呵呵呵呵呵呵呵呵呵呵呵呵</span></div></body>

②一个简单的图形动画

代码如下：

<style>@keyframes move1{0%{left: 100px;top: 200px;}15%{left: 150px;top: 300px;border-radius: 15px;background-color: lightskyblue;}30%{left: 400px;top: 400px;border-radius: 30px;background-color: rgb(48, 204, 108);}45%{left: 450px;top: 300px;border-radius: 50px;background-color: rgb(93, 46, 168);}60%{left: 500px;top: 200px;border-radius: 80px;background-color: rgb(215, 235, 128);}75%{left: 450px;top: 100px;border-radius: 100px;background-color: rgb(13, 123, 192);}90%{left: 300px;top: 0px;border-radius: 0px;background-color: rgb(240, 77, 153);}100%{left: 50px;top: 100px;border-radius: 20px;background-color: rgb(250, 196, 135);}}div{/* margin: 200px; */width: 200px;height: 200px;position: absolute;left: 100px;top: 200px;border: lightslategrey;background-color: lightsalmon;border-radius: 100px;animation: move1 10s ease-in;}</style><body><div></div></body>

浏览器效果自行查看。

CSS过渡、变形及动画相关推荐

CSS过渡属性、动画属性详解
第十四章:过渡属性和动画属性 1. transition过渡效果属性 1.1 transition属性的分解写法 1.2 transition属性的复合写法 1.3 多个属性,分开设置 1.4 注意 ...
CSS动画示例（上一篇是CSS过渡…）
大家好,欢迎来到雄雄的小课堂,前面,我们将CSS的变形和过渡都整理了,有需要的可以移步这里看: CSS3中的动画示例 CSS3的几个变形案例-- 今天,我们来看看CSS3的动画. CSS3使用动画分为 ...
CSS——过渡、形变、动画
一.什么是过渡鼠标移动到一个元素上面,元素发生变化,鼠标移走,变化消失:这是一个动态的过程,这就是过渡.在CSS过渡中允许你在给定的时间内平滑地改变属性值. 通过过渡可以指定一个属性发生变化的切换方 ...
[css] 过渡和动画的区别是什么？
[css] 过渡和动画的区别是什么? 相同:都会让你的页面元素动起来区别: 过渡 transition1.需要事件触发,比如hover,focus,checked , js改, @media que ...
html和css动画效果,css过渡和css动画的区别是什么？
CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果.那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助. css过渡 ...
css过渡和css动画的区别是什么？
CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果.那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助. css过渡 ...
css动画及css过渡
一.css动画 1.定义动画:使用@keyframes定义动画,关键帧可以使用关键字from~to,也可以使用 0%~100% 2.配置动画: 1) animation-name ...
css过渡和动画的区别
css过渡和动画的区别 css过渡和动画(animation)都能让元素动起来,区别在于: 1.css过渡需要有一个事件触发(像 :hover等),才会起作用,而animation不需要. 2.动画( ...
CSS 3D变形动画属性之逆天立方体叠加动画
上一篇, juejin.im/post/5993d9- 把立方体的盒子搭出来之后,因为怕文章又臭又长(嗯,就是没有想好玩什么效果,偏不告诉你)关于动效没有做更多的处理,只做了一个绕Y轴旋转,这篇试着做 ...

CSS过渡、变形及动画

一、过渡（transition）

1、CSS过渡的概念

2、transition相关属性

3、CSS过渡的简单实例

二、变形（transform）

1、CSS变形的概念

2、2D转换

3、3D转换

4、CSS变形的简单实例

三、过渡和变形的区别

四、动画（animation）

1、CSS动画的概念

2、animation相关属性

3、CSS动画的简单实例

CSS过渡、变形及动画相关推荐

最新文章

热门文章