transition属性和transform属性

transition属性和transform属性

transition

在CSS3里使用transition可以实现补间动画（过度效果），并且当前元素只要有“属性”发生变化时就会存在两种情况。就可以实现平滑的度过，

语法格式：transition:要过度的属性 花费时间 运动曲线 何时开始；

如果有多组属性变化，用逗号隔开

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	过渡 属性的名称。
transition-duration	过渡效果花费的时间 ,默认是 0。
transition-delay	规定过渡效果何时开始。默认是 0。
transition-timing-function	过渡效果的时间曲线。默认是 “ease”。

transform

transform可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式

属性	描述
translate(x,y,z)	水平方向和垂直方向同时移动 可以3D变形
scale(x, y)	缩放
rotate(deg)	旋转 可以3D变形
transform-origin	可以调整元素转换变形的原点
skew(deg, deg)	倾斜

例题：此代码实现的是鼠标hover时 两扇门打开 看到里面的图片

<style>
        * {
   
            padding: 0;
            margin: 0;
        }
        
        .box {