transtion这个效果是需要触发才会发现的效果
4个参数
1、transtion-proprety 决定哪些因素可以触发效果 默认是ALL
例如 color变化有一个过渡效果
trainsition-proprety:color;
2 transition-durtation 决定这个动画执行多长时间
例如 2分钟的
transiton-durtation:2s;
3 transtion-timimg-function 决定动画durtation这段时间执行速度变化
例如 匀速
transiton-timimg-function:linear;
三个不同的方式
transiton-timimg-function:ease; 中间快 两边慢;
transtion-timing-function:steps(3,start)
transtion-timing-function:cubic-bezier(x1,y1,x2,y2);
4 transiton-delay 决写这个动画延时多长时间执行
例如 2秒才指行
transition-delay:2s;
5 组合写法
trainstion:2s;
trainstion:color 2s,width 2s ease 1s;
触发方式:hover focus 点击click 媒体查询medio active