web前端：CSS3 过渡

作者:不教一日闲过 更新于： 2020-03-13 22:11:41

　　早在2001年W3C就完成了css3的草案规范。css3规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容，这些模块独立实现和发布，也为日后CSS的扩展奠定了基础。

　　CSS3过渡

　　过渡：执行一定操作后某属性从指定状态过渡到另一状态。1.指定要添加效果的CSS属性。2.指定效果的持续时间。

　　div{

　　transition:width2s;

　　-webkit-transition:width2s;/*Safari*/

　　}

　　div:hover{

　　width:300px;

　　}

　　div{

　　transition:width2s,height2s,transform2s;

　　-webkit-transition:width2s,height2s,-webkit-transform2s;

　　}

　　transition的四个属性如下：

　　div{

　　transition:属性名过渡时间过渡效果的时间曲线开始的延迟时间

　　-webkit-transition:属性名过渡时间过渡效果的时间曲线开始的延迟时间

　　}

　　属性名:widthheightbackground-color;

　　过渡时间:2s;

　　过渡效果的时间曲线:lineareaseease-inease-outease-in-out;

　　开始的延迟时间:2s;

　　CSS3编程工具同CSS，任何一种文本编辑工具都可用来编写，如:Windows下的写字本、记事本;或其他专门用于编辑网页文本的工具，如:IntelliJIDEA、Eclipse、MyEclipse、webstorm、sublimetext;此外还有专门针对前端开发的插件，如:Emmet。