transition效果学习总结

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