CSS3过渡

CSS3过渡

CSS3过渡是一种实现元素从一种样式逐渐变化为另一种样式的效果的技术。它可以让网页的动画效果更加流畅和自然，而不需要使用Flash或JavaScript。在本文中，我们将介绍CSS3过渡的基本概念和用法。

过渡的原理

要使用CSS3过渡，我们需要指定两个要素：

• 要添加过渡效果的CSS属性
• 过渡效果的持续时间

例如，我们可以为一个div元素的width属性添加过渡效果，让它在2秒内从100px变为300px：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s; /* 过渡属性和持续时间 */
}

div:hover {
  width: 300px; /* 鼠标悬停时的新值 */
}

当我们把鼠标移动到这个div元素上时，它的宽度就会平滑地增加到300px；当我们把鼠标移开时，它的宽度就会平滑地恢复到100px。这就是CSS3过渡的基本效果。

过渡的属性

除了指定要添加过渡效果的CSS属性和持续时间之外，我们还可以使用以下几个属性来控制过渡的细节：

• transition-timing-function：规定过渡效果的速度曲线，默认是ease，表示先慢后快再慢。其他可选值有linear（匀速）、ease-in（慢速开始）、ease-out（慢速结束）、ease-in-out（慢速开始和结束）和cubic-bezier(n,n,n,n)（自定义贝塞尔曲线）。
• transition-delay：规定过渡效果开始之前的延迟时间，默认是0。可以是正值或负值，单位是秒或毫秒。
• transition-property：规定应用过渡效果的CSS属性的名称，默认是all，表示所有属性都有过渡效果。可以是一个或多个属性名，用逗号分隔。
• transition：简写属性，用于在一个属性中设置上述四个过渡属性。

例如，我们可以为上面的例子添加一些过渡属性，让宽度变化更加有趣：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s ease-in-out 1s; /* 简写属性 */
}

div:hover {
  width: 300px;
}

这样，当我们把鼠标移动到这个div元素上时，它会在1秒后开始变化宽度，以慢速开始和结束的方式，在2秒内达到300px；当我们把鼠标移开时，它会以相同的方式恢复到100px。

过渡的应用

CSS3过渡可以应用于任何可以改变值的CSS属性，比如颜色、背景、字体、边框、位置、尺寸、形状等等。我们可以利用过渡来制作各种各样的动画效果，比如按钮、菜单、幻灯片、弹出框等等。下面是一些简单的示例：

按钮

我们可以为一个按钮添加一些过渡效果，让它在鼠标悬停时改变颜色、字体大小和阴影：

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background: blue;
  color: white;
  font-size: 16px;
  box-shadow: none;
  transition: all 0.5s; /* 所有属性都有0.5秒的过渡效果 */
}

button:hover {
  background: green;
  font-size: 18px;
  box-shadow: inset 0 -5px black; /* 内部阴影 */
}

菜单

我们可以为一个水平菜单添加一些过渡效果，让每个菜单项在鼠标悬停时改变背景颜色和高度，并向下移动：

ul {
  list-style: none;
}

li {
  display: inline-block;
  padding: 10px;
  background: gray;
}

a {
  text-decoration: none;
  color: white;
}

li:hover {
  background: orange;
}

li:hover a {
  display: block; /* 让a元素成为块级元素 */
  height: calc(100% + 10px); /* 让a元素高度增加10px */
  transform: translateY(10px); /* 让a元素向下移动10px */
}

幻灯片

我们可以为一个幻灯片添加一些过渡效果，让每张图片在切换时淡入淡出：

.slide {
    position:relative; /* 相对定位 */
    width:500px; /* 幻灯片容器宽度 */
    height:300px; /* 幻灯片容器高度 */
    overflow:hidden; /* 隐藏超出范围的内容 */
}

.slide img{
    position:absolute; /* 绝对定位 */
    top:0; /* 图片顶部对齐容器顶部 */
    left:-500px; /* 图片左边界在容器左边界之外 */
    width:500px; /* 图片宽度与容器相同 */
    height:auto; /* 图片高度自适应 */
    transition:left .5s ease-in-out .5s; /* 过渡效果：左边距0.5秒缓入缓出，延迟0.5秒 */
}

.slide img:first-child{
    left:0; /* 第一张图片左边距为0 */
}

.slide:hover img{
    left:-500px; /* 鼠标悬停时所有图片左边距为-500px */
}

.slide:hover img:last-child{
    left:0; /* 鼠标悬停时最后一张图片左边距为0 */
}

过渡的注意事项

使用CSS3过渡时，还需要注意以下几点：

• 过渡只关心元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态。
• 元素在初次渲染还没有结束的时候，是没有办法触发过渡的。
• 在绝大部分变换样式的切换时，变换组合的个数或位置不一样时，是没有办法触发过渡的。
• transitionend事件：在每个属性完成过渡时都会触发这个事件（DOM2事件），多个属性会触发多次。
• 当属性值的列表长度不一致时,跟时间有关的重复列表,transition-timing-function使用默认值。

总结

CSS3过渡是一种实现元素从一种样式逐渐变化为另一种样式的效果的技术。它可以让网页的动画效果更加流畅和自然，而不需要使用Flash或JavaScript。要使用CSS3过渡，我们需要指定要添加过渡效果

参考资料
(1) CSS3 过渡 | 菜鸟教程. https://www.runoob.com/css3/css3-transitions.html.
(2) CSS 过渡 - w3school 在线教程. https://www.w3school.com.cn/css/css3_transitions.asp.