平移与过渡

2020-07-09

平移与过度

变形平移
属性transform:变形不会影响布局
平移:translate:三个可选值:translate(X),translate(Y),translate(Z),在平移元素中百分比是相对自身的宽高
所以我们可以利用这个特性实现元素居中，在前面当我们开启绝对定位后，设置top:50%,left:50%后并未完全居中，往前我们使用margin平移元素宽度的一半，这里我们还可以使用transform:translate(-50%,-50%)，来实现居中
旋转:rotate:同上三个方向可选值，此处的x，y，z方向是左手坐标系，同时我们牢记一点，垂直图片的方向就是z轴
缩放：scaleX(),scaleY()，参数可以填常数1，2……表示放大为多少倍，缩小就填-1，-2……
过渡属性transition
·transition-property:指定要过渡的元素，多个属性用，隔开，如果所有元素都要过渡，使用all关键字，颜色也是可以过渡的属性
·transition-duration:过渡时间，即完成这个过渡效果使用的时间，可以使用秒或毫秒做单位
·transtion-timing-function:过渡的时序函数，可选值有

ease:默认值，先加速后减速
liner:匀速
ease-in:加速
ease-in-out:先加速后减速
step(n):分步执行

·transition-delay:添加延时时间
动画效果:设置关键帧

@keyframes+名字{
    from{
        开始位置
    }
    to{
        结束位置
    }
}

设置完成后在元素中添加:animation-name:+上述名字
animation-duration:执行时间
animation-delay:延时
animation-timing-function:同上
animation-iteration-count:执行次数