CSS中视频尺寸处理和过渡效果

我们都用过hover和active这种伪类属性，我们用​​trasnsition​​也可以使用这种过渡效果。而且​​transition​​属性也不需要增加私有前缀了。​​transition​​是一个常用属性也是一个缩写，是由​​transition-duration​​、​​transition-delay​​、​​transition-property​​、​​transition-timing-function​​这四种css缩写而成的。

​​transition-duration​​属性表示过渡时间，它不能是负值，但是可以为0，​​transition: 2s 4s​​第一个值表示过渡时间，第二个值表示延时时间，这两个值是固定的，不能调换顺序，否则意思会颠倒过来。

当我们如果写了负值，可能就会无序排列，例如：

transition: 3s -1s;
transition: -1s 3s;

上面这两种效果是一样的，原因就是因为​​transition-duration​​不能是负值，所以代码中的-1只能是​​transition-duration​​的属性值，两个值就可以无序排列。

​​transition-delay​​用来指定延时过渡效果执行的时间，单位可以是秒或者毫秒，也可以为负值。当属性值为负值的时候，就可以节省部分动画进程。

.wrapper {
    transform: translateX(0);
    transition-duration: 2s;
    transition-delay: -1s;
}
.wrapper:hover {
    transform: translateX(200px);
}

当鼠标经过wrapper元素的时候，元素的位移不是从0开始，而是从100px的位置开始的。而且对应的过渡时间也是1s而不是2s，最终过渡执行的时间等于动画过程时间加延时时间。而且我们还可以利用这个过渡效果延迟时间当我们鼠标经过图片的时候不会立即触发事件，我们可以设置触发事件的延迟时间。

​​transition-property​​用来设置应用过渡效果的CSS属性，初始值为all，默认所有的CSS属性都具有应用过渡效果。不是所有的元素都支持过渡效果，​​display​​属性就不支持过渡效果，而且当我们同时设置了​​display:none​​和​​transition​​效果时，display会将过渡效果瞬间中断，导致transitionend事件不会触发。如果我们希望有过渡效果而且同时可以隐藏，我们可以使用​​visibility​​属性，​​visibility​​属性在transition过渡效果中比较实用。如果​​transition-property​​的属性值列表长度过短，其他过渡属性多余的列表值会被忽略。​​transition​​缩写属性也支持逗号分割多个独立的过渡效设置。

​​transition-timing-function​​​属性通过设置过渡时间函数来影响过渡效果的过渡速率，​​transition-timing-function​​​属性和​​animation-timing-function​​​支持的属性值的类型是一致的。有三种：线性运动类型，用​​linear​​​表示。三次贝塞尔时间函数(​​ease、ease-in、ease-out、ease-in-out​​​)等关键字和​​cubic-bezier()​​​函数。步进时间函数类型(​​step-start​​​)等关键字和​​step()​​​函数。而且​​transition-timing-function​​​属性用的地方比较少，一般使用默认值​​ease​​就可以在所有的场景中使用了。

​​object-fit​​属性只支持关键字属性值，接收的有fill、contain、cover、none、scale-down。​​fill​​是默认值，表示填充替换内容会拉伸，不保证原有的比例。​​contain​​表示包含替换内容保持原有尺寸比例，同时替换内容一定可以完整显示，至少有一个尺寸保持一致。​​cover​​表示覆盖替换内容同样会保持原始的尺寸比例，同时替换内容会完全覆盖区域。​​none​​表示替换内容的尺寸显示为原始尺寸，无视外部尺寸设置，如果图片尺寸较小，就会在四周产生大量留白，如果图片尺寸较大，则会有较大面积的图片区域被剪裁。​​scale-down​​选取呈现的尺寸较小的那个效果。

object-fit: fill;
object-fit: contain;
object-fit: none;
object-fit: cover;
object-fit: scale-down;

​​image-rendering​​属性用来设置图像的缩放算法，主要用于png和jpg这类图。不仅可以设置在img元素上，还可以设置在img的祖元素上面，还可以设置background图像和canvas画布图像的缩放算法。image-rendering属性只有在图像发生缩放的时候才会有效果。接收的参数有auto、crisp-edges、pixelated。​​auto​​表示浏览器自动选择使用何种图像缩放算法，通常表现为平滑缩放。​​crisp-edges​​表示不使用平滑缩放算法，所以缩放的图像会有较高的对比度和较锐利的边缘，也不会有模糊的感觉。​​pixelated​​表示当放大图像时，必须使用邻近算法，使图像看起来由大像素块组成；当缩小图像时，使用与auto关键字属性值相同的算法。

.warpper {
    image-rendering: auto;
}
// 图像边缘锐化
.box {
    image-rendering: crisp-edges;
}
// 图像像素化
.content {
    image-rendering: pixelated;
}

​​cross-fade()​​函数可以让两张图像半透明混合。新语法可以指定任意数量的透明叠加图像，同时可以分别指定每张图像的透明度。也可以不指定透明度值，则未指定透明度值的图像的透明度值是用100%减去已经指定的透明度百分比值，然后除以未指定透明度值图像的数量得来的。可以用于实现降低背景图透明度的效果。

cross-fade(url(test.png) 64%, url(web.png) 88%);

​​element()​​函数可以让页面中任意DOM元素的渲染效果变成图像，使用方法就是element(#id)，这个id指的就是页面中DOM元素的id值。可以用于实现元素的倒影效果。