Css权威指南(4th，第四版中文翻译)-17.过渡

CSS过渡

CSS transition 提供了一种控制属性渐变的方法。例如：

button {
color: magenta;
transition: color 200ms ease-in 50ms; }

button:hover {
color: rebeccapurple;
transition: color 200ms ease-out 50ms; }

---

过渡属性

渐变有4中渐变属性组成：transition-property, transition-duration,transition-timing-function, transition-delay.

通过属性来限制过渡效果

transition-property可以用来定义需要过渡的css 属性名称。

div {
color: #ff0000;
border: 1px solid #00ff00; border-radius: 0;
transform: scale(1) rotate(0deg); opacity: 1;
box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
width: 50px;
padding: 100px; }
div:hover {
color: #000000;
border: 5px dashed #000000; border-radius: 50%;
transform: scale(2) rotate(-10deg); opacity: 0.5;
box-shadow: -3px -3px rgba(255, 0, 0, 0.5); width: 100px;
padding: 20px;
}

div {
color: #f00;
border: 1px solid #00ff00; border-radius: 0;
transform: scale(1) rotate(0deg); opacity: 1;
box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
width: 50px;
padding: 100px;
transition-property: all, border-radius, opacity; transition-duration: 1s, 2s, 3s;
}

设置过渡时间

image.png

input:invalid { transition-duration: 1s; background-color: red;
}
input:valid { transition-duration: 0.2s; background-color: green;
}

调整过渡时间函数

image.png

image.png

基本的常用函数汇总如下：

image.png

下面主要来看下贝塞尔曲线的使用，因为所有的简称都是曲线的特定参数：

image.png

image.png

曲线接受2个点坐标，分别对应上图的红点和绿点，具体可以参考http://cubic-bezier.com，下面是所有属性对应的曲线形状：

image.png

image.png

image.png

步进计时

除了连续的beizier函数，也厚分阶段进行的方法：

image.png

image.png

延迟过渡

image.png

div {
transition-property: color, border, border-radius, transform, opacity,
box-shadow, width, padding; transition-duration: 200ms; transition-timing-function: linear;
transition-delay: 0s, 200ms; }

## transition简写
![image.png](https://upload-images.jianshu.io/upload_images/14451636-ff14fa89e578b1e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

navliul{
transition: transform 200ms ease-in 50ms,
opacity 200ms ease-in 50ms;
}
navliul{
transition: all 200ms ease-in 50ms;
}
navliul{
transition: 200ms ease-in 50ms;
}

---

反向：Transitioning Back to Baseline

a{
background: yellow;
transition: 200ms background-color linear 0s; }
a:hover {
background-color: orange;
/* delay when going TO the :hover state */ transition-delay: 50ms;
}

navulul{
transform: scale(1, 0);
opacity: 0;
...
transition: all 4s steps(8, start) 1s;
}
nav li:hover ul {
transform: scale(1, 1);
opacity: 1;
transition: all 200ms linear 50ms;
}

可实现动画的属性和值

首先我们要了解不是所有属性都是可以有动画的。我们判断是否可实现动画的很重要特征就是是否可插值。比如display属性像block，inline-block，明显就是独立的类型值，是不能够插值的，所以是无法实现动画的。

属性值是如何差值

小数内容被插值的也为小数，整数的话插值内容也是整数。在CSS中，长度和百分比都被解析为实数，燃用通过calc计算实现过渡动画；所有颜色的过渡统一转成rgba。

---

备选方案：过渡只是增强功能

过渡的话浏览器兼容的都很好。

---

打印过渡

当网页打印的时候，print media的样式会被采纳。如果元素的媒体只匹配了screen，那么CSS就不会打印。如果没有media属性的话，默认都是all。过渡在打印的时候都会被忽略，只有当前值才会打印。