css3 页面过渡效果-css3过渡属性用法解读（教你使用css3过渡

今天教大家如何使用css3的transition来实现转场动画效果，并讲解css3的transition属性的用法。 核心知识是css3实现过渡动画的核心样式属性是transition，然后配合常用的2D或3D变换css3 页面过渡效果，如：rotate、scale、skew、translate3d等，实现常用的动画效果在我们的业务发展中。

transition用于指定需要转场的属性名称、转场时间、转场效果曲线、转场延迟时间

下表列出了所有转换属性：

属性

描述

过渡性质

需要转换的属性名称

过渡持续时间

过渡时间，默认为0

转换定时函数

过渡功效曲线css3 页面过渡效果，默认为“ease”

转换延迟

过渡延迟时间，默认为0

// 各个属性单独设置
div	{
  transition-property: scale; // 过度效果只影响宽度
  transition-duration: 1s; // 持续时间1秒
  transition-timing-function: linear; // 匀速动画
  transition-delay: 2s; // 动画延时2秒执行
}
// 一次性设置，效果和上面的一样
// 实际开发中一般都一次性设置
div {
  transition:width 1s scale 2s;
}

实际案例

1. 鼠标向上移动，等差放大

.demo {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  // transform变换时，0.3秒动画
  transition: transform 0.3s;
  cursor: pointer;
}
.demo:hover {
  // 鼠标移动上去的时候
  // scale等比宽度和高度等比放大1.2倍
  transform: scale(1.2, 1.2);
}

影响

2.鼠标向上移动，旋转360度

.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // transform变换时，1秒动画
  transition: transform 1s;
  cursor: pointer;
}
.demo:hover {  // 鼠标移动上去的时候
  // rotate旋转360度
  transform: rotate(360deg);
}

影响

3.鼠标移至右下角进行连接

.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // transform变换时，1秒动画
  transition: transform 1s;
  cursor: pointer;
}
.demo:hover {  // 鼠标移动上去的时候
  // translate向右移动50px，向下移动30px
  transform: translate(50px,30px);
}

影响

4. 鼠标移动时，x方向变换30度，y方向变换20度。

.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // transform变换时，1秒动画
  transition: transform 1s;
  cursor: pointer;
}
.demo:hover {  // 鼠标移动上去的时候
  // translatex变换方向变形30度，y方向变形20度
  transform: skew(30deg,20deg);
}

影响

5. 3D动画旋转这里仅以rotateY为例

还有其他3D动画包括translate3d(x, y, z)、scale3d(x, y, z)、rotate3d(x, y, z, angle)，大家可以按照我的反例举一反三

.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // transform变换时，1秒动画
  transition: transform 1s;
  cursor: pointer;
}
.demo:hover {  // 鼠标移动上去的时候
  // translate,沿Y方向转360度
  transform: rotateY(360deg);
}

影响

6. 其他过渡

css的很多属性都是可以过渡和变换的。 这是宽度的示例。 其他比例如颜色、高度、顶部等都合适。

.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // 宽度变换时，1秒动画
  transition: width 1s;
  cursor: pointer;
}
.demo:hover {  // 鼠标移动上去的时候
  // 宽度变200px
  width: 200px;
}

影响

嗯，基本上开发时能用到的转场效果都包含了。