CSS3 Transition[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。
Transition 简介
Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。
transition-property用于指定应用过渡属性的名称transition-duration用于指定这个过渡的持续时间transition-delay用于指定延迟过渡的时间transition-timing-function用于指定过渡的类型
transition-property
transition-property 用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用, 分隔。
默认值为 all 也就是所有的元素都应用过渡效果。
例如，想让容器的宽高有一个过渡的效果，就可以这样写:
<style> .box {
width: 200px; height: 200px; background-color: dodgerblue; transition-property: width, height; /*设置宽高过渡的属性*/ } .box:hover {
/*在鼠标移入的时候修改宽高*/ width: 400px; height: 400px; } </style>
<body>
<div class="box"></div>
</body>注意：当只设置了 transition-property 属性而没有设置过渡持续时间的时候，过渡效果不会生效。
transition-duration
transition-duration 用于设置过渡的持续时间，属性值以秒s或毫秒ms为单位，默认值为0。
同样可以指定多个时长，多个每个时长会被应用到由 transition-property 指定的对应属性上。
例如：想让容器的宽度有一个5秒的过渡效果，高度有一个3秒的过渡效果，就可以这样写:
<style> .box {
width: 200px; height: 200px; background-color: dodgerblue; transition-property: width, height; transition-duration: 5s, 3s; /*设置与 transition-property 对应的过渡时间*/ } .box:hover {
/*在鼠标移入的时候修改宽高*/ width: 400px; height: 400px; } </style>
</head>
<body>
<div class="box"></div>
</body>运行效果图：
如果指定的时长个数小于属性个数，那么时长列表会重复。 以下代码的意思是：宽度、高度、背景颜色的过渡时间都是5秒。
<style> .box {
width: 200px; height: 200px; background-color: dodgerblue; transition-property: width, height, background-color; /* 属性列表长一些 */ transition-duration: 5s; /* 如果时长的个数小于属性列表，则时长列表会重复 */ } .box:hover {
width: 400px; height: 400px; background-color: deeppink; } </style>
<body>
<div class="box"></div>
</body>运行结果如下：
如果时长列表更长，那么该列表会被裁减。 两种情况下，属性列表都保持不变。 以下代码的意思是：宽度的过渡时间是5秒，高度3秒，背景颜色2秒
<style> .box {
width: 200px; height: 200px; background-color: dodgerblue; transition-property: width, height, background-color; /* 设置三个属性的过渡效果 */ transition-duration: 5s, 3s, 2s, 1s, 0s; /* 有五个时长，会从第四个开始截断。 */ } .box:hover {
width: 400px; height: 400px; background-color: deeppink; } </style>
<body>
<div class="box"></div>
</body>运行结果如下
transition-delay
transition-delay 规定了在过渡效果开始作用之前需要等待的时间（延迟时间），值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性transition-property。
<style> .box {
width: 200px; height: 200px; background-color: dodgerblue; transition-property: width; /* 设置宽度有过渡效果 */ transition-duration: 3s; /* 设置过渡时间为 3s */ transition-delay: 1s; /* 设置延迟时间为 1s */ } .box:hover {
width: 300px; } </style>
<body>
<div class="box"></div>
</body>运行结果如下：
transition-timing-function
transition-timing-function用于指定过渡类型，可选值有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
ease默认值，先加速后减速
<style> .box {
width: 200px; height: 200px; background-color: dodgerblue; transition-property: width; transition-duration: 3s; transition-timing-function: ease; /* 设置过渡类型,默认为 ease(先加速后减速) */ } .box:hover {
width: 400px; } </style>
<body>
<div class="box"></div>
</body>运行结果如下：
linear匀速
transition-timing-function: linear;运行结果如下：
ease-in加速
transition-timing-function: ease-in;运行结果如下：
ease-out减速
transition-timing-function: ease-out;运行结果如下：
ease-in-out先加速后减速，效果比ease感觉强烈一些
transition-timing-function: ease-in-out;运行结果如下：
cubic-bezier贝塞尔曲线
transition-timing-function: cubic-bezier(.09, .88, .2, .17);运行结果如下：
简写属性 transition:
transition是一个简写属性，用于设置 transition-property,transition-duration,transition-timing-function, 和transition-delay。
CSS 过渡 由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间 。
<style> .box {
width: 200px; height: 200px; background-color: dodgerblue; /* transition 简写属性 */ transition: 1s width, 2s height; } .box:hover {
width: 400px; height: 400px; } </style>
<body>
<div class="box"></div>
</body>运行结果如下：
注意：
在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay
推荐抒写顺序
过渡时间 过渡样式 过渡形式 延迟时间 [，过渡时间 过渡样式 过渡形式 延迟时间]
兼容性
transition可以不用厂商前缀，不过鉴于标准刚刚稳定，对于基于 Webkit的浏览器仍然需要厂商前缀。如果想兼容旧版本的浏览器那么也需要厂商前缀（例如Firefox 15 及之前版本, Opera 12 及之前版本)
过渡的坑
transition在元素首次渲染还没有完成的情况下，是不会触发过渡的。 过渡如果写在js中，则必须 写在onload 函数中，否则在页面中的元素还没有渲染完的情况下不会触发过渡!
<style> * {
margin: 0; padding: 0; } .box {
width: 200px; height: 200px; background-color: deepskyblue; margin: 100px auto; transition: 1s; } </style>
<script> /* 在元素还没有完全加载的时候是不会触发过渡的 */ var box = document.querySelector(".box"); box.style.width = "300px"; </script>
</head>
<body>
<div class="box"></div>
</body>解决方法
<script> window.onload = function () {
var box = document.querySelector(".box"); box.style.width = "300px"; }; </script>transition在绝大部分变换样式切换时，变换组合的个数或位置不一样时，是没有办法触发过渡的- 过渡只关心元素的初始状态和结束状态，没有方法可以获取到元素在过渡中每一帧的状态
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158385.html原文链接：https://javaforall.cn
腾讯云开发者
