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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 1,433评论 0 5
  • 上一篇介绍了CSS3里transform变形属性,本篇介绍另一个人气动画属性transition。transiti...
    张歆琳阅读 25,061评论 1 31
  • transform、transition、animation分别代表着转换、过渡以及动画。从各自的名字我们就可以大...
    Ginkela阅读 3,873评论 0 12
  • Transition and animations 贝塞尔曲线在线工具(需翻墙) 贝塞尔曲线在线工具(无需翻墙)...
    ilaoke阅读 951评论 1 5
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,337评论 0 11