CSS3 transition动画

1、transition-property 设置过渡的属性,比如:width height background-color

2、transition-duration 设置过渡的时间,比如:1s 500ms

3、transition-timing-function 设置过渡的运动方式

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • cubic-bezier(n,n,n,n)
  • 比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)
  • 贝塞尔曲线设置网站:http://xuanfengge.com/easeing/ceaser/

4、transition-delay 设置动画的延迟

5、transition: property duration timing-function delay 同时设置四个属性

<style type="text/css">       
.box{
    width:100px;
    height:100px;
    background-color:gold;
    transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;            
}
.box:hover{
    width:300px;
    height:300px;
    background-color:red;
}
</style>
......
<div class="box"></div>


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

推荐阅读更多精彩内容

  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 5,274评论 0 5
  • 2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...
    Zd_silent阅读 3,047评论 0 0
  • 转自:https://www.jianshu.com/p/56f8ddafc63f上一篇介绍了CSS3里trans...
    BULL_DEBUG阅读 4,191评论 0 0
  • 上一篇介绍了CSS3里transform变形属性,本篇介绍另一个人气动画属性transition。transiti...
    张歆琳阅读 25,111评论 1 31
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,818评论 0 11