transition

过渡 transition 1.过渡的定义和使用 在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式在一定的时间内，从旧的样式转变成新的样式，而这个过程就是过渡。过渡其实就是一个简单的动画效果 transition是简写之后的属性名，它其实是4个属性合并而成的，按顺序依次是： transition-property: 过渡属性(默认值为all) transition-duration: 过渡持续时间(默认值为0s) transiton-timing-function: 过渡函数(默认值为ease函数) transition-delay: 过渡延迟时间(默认值为0s) 注意：添加的属性他的属性值必须有明确的数值，例如color，left，width之类的，如果是display这种则无效 transition我们很少拆分使用，通常都是简写 所有属性过渡 transition: all 1s; 多个属性过渡,各个属性用 逗号 隔开 transition: width 1s,height 1s; 设置延迟和过渡函数 transition: width 2s ease 1s; 2.过渡的时间函数

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。 CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义 timing funtion ，比如匀速地或先快后慢)。 可动画属性的列表是： -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-position background-size border border

CSS3属性（过渡，2D变换，3D变换，动画）一、transition属性 (加给变换的元素)[]定义： 元素从一种样式逐渐改变为另一种的效果。[]前提：①css属性指定 ②效果持续时间[]过渡有四个属性值 * 过渡属性名称：transition-property (/) * 过渡时间：transition-property (0) * 运动(时间)曲线:transition-timing-function * ease (default) * linear * ease-in * ease-out * ease-in-out * 延迟时间:transition-delay (0) []多组过渡效果 ： 添加的属性由逗号分隔。 transition: width 2s , height 2s 2s ; []all属性的作用 当前元素多个属性需过渡，且同时发生 eg: transition: width 2s , height 2s , background-color 2s; transition: all 2s;[]注意： 1.过渡不要写在hover里面 2.不管正反方向，效果图均按代码顺序变化二、transform属性（元素2D与3D转换）[]定义：transform属性应用于元素的2D或3D转换，可将元素旋转，缩放，移动，倾斜等[]属性 * 2D 转换 * translate