css过渡：元素从一种样式逐渐改变为另一种的效果。

过渡所需的条件：1.所过渡的元素必须有css样式。2.必须有过渡时间。

以下是过渡元素的属性：

transition:简写属性，用于在一个属性中设置四个过渡属性。

transition-property:规定应用过渡的 CSS 属性的名称。

transition-duration:过渡所用的时时间。

transition-timing-function:过渡元素的时间曲线，属性值有linear(匀速的过程)、ease(逐渐变慢的过程)、ease-in(加速的过程)、ease-out(减速的过程)、cubic-bezier(0,0,0,0)贝塞尔曲线

transition-delay:指定一个过渡的开始时间(即多长时间后开始执行)，默认是0

过渡效果我们一般用在鼠标滑过或者点击后，我这里以鼠标滑过为例：

1.鼠标滑过宽度变为原来的120%

2.鼠标滑过加上阴影

3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果。

transform(2D转换)

属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)

html部分

css部分：

#box{

height: 200px;

width: 200px;

border:1px solid #000;

/*1.鼠标滑过宽度变为原来的120%*/

transition-property: width; /*所要过渡的属性名称*/

transition-duration: 1s;/*过渡的时间*/

transition-timing-function: linear;/*过渡的时间曲线*/

transition-delay: 0;/*过渡的开始时间*/

/*2.鼠标滑过加上阴影*/

transition-property: box-shadow; /*所要过渡的属性名称*/

transition-duration: 1s;/*过渡的时间*/

transition-timing-function: linear;/*过渡的时间曲线*/

transition-delay: 0;/*过渡的开始时间*/

/*以上写法比较麻烦所以可以简写成：*/

transition: all 1s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/

-ms-transition: all 1s linear 0s;/*兼容IE10+*/

-moz-transform: all 1s linear 0s;/*兼容 Firefox */

-o-transition: all 1s linear 0s;/* 兼容Opera */

-webkit-transform: all 1s linear 0s;/* 兼容Safari and Chrome */;

}

/*transform(2D转换)

属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)*/

#box:hover{

width: 120%;

box-shadow: 0px 0px 5px orange;

/*3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果*/

/*1.平移*/

transform: translate(50px,50px); /*translate() 如果一个值表示x轴需要平移的距离，两个值则表示x、y轴需要平移的距离*/

-webkit-transform: translate(50px,50px);/* 兼容Safari and Chrome */;

-ms-transform: translate(50px,50px);/*兼容IE10+*/

-moz-transform: translate(50px,50px);/*兼容 Firefox */

-o-transform: translate(50px,50px);/* 兼容Opera */

/*只让x轴平移*/

transform: translateX(50px);

-webkit-transform: translateX(50px);/* 兼容Safari and Chrome */;

-ms-transform: translateX(50px);/*兼容IE10+*/

-moz-transform: translateX(50px);/*兼容 Firefox */

-o-transform: translateX(50px);/* 兼容Opera */

/*只让y轴平移*/

transform: translateY(50px);

-webkit-transform: translateY(50px);/* 兼容Safari and Chrome */;

-ms-transform: translateY(50px);/*兼容IE10+*/

-moz-transform: translateY(50px);/*兼容 Firefox */

-o-transform: translateY(50px);/* 兼容Opera */

/*2.旋转*//*兼容性同 平移*/

transform:rotate(45deg); /*正值表示顺时针旋转，负值表示逆时针旋转*/

/*只让x轴旋转*/

transform:rotateX(45deg);

/*只让y轴旋转,相当一3D旋转*/

transform:rotateY(45deg);

/*3.缩放*//*兼容性同 平移*/

transform:scale(0,0.2); /*两个值，第一个表示水平缩放，第二个表示竖直缩放*/

/*4.扭曲*//*兼容性同 平移*/

transform:skew(30deg, 30deg); /*第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/

}

深入理解CSS过渡transition

× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

Vue过渡效果之CSS过渡

前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

047——VUE中css过渡动作实例