css3过渡动画怎样使用-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

css3过渡动画怎样使用

简介:
通过
CSS3,我们可以在不使用js的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。他的属性为:transition,但是他也有他的缺点,Internet
Explorer 9 以及更早的版本,不支持 transition属性。那么他是怎么应用的呢,比如我们官网首页服务流程的几个小图标,鼠标滑上去会转动。

他的样式是这样去写的:

这样的话当鼠标滑过变成另一种样式就有了一个过渡效果。那么他具体有那些属性呢:

如果你想让他变宽,时间长为两秒,你就可以这样去写,

div

{

transition: width 1s;

-moz-transition: width 1s;

-webkit-transition: width 1s;

-o-transition: width 1s; }

}

不同的浏览器兼容的写法是不一样的,上面已标明。如果是变化高度,只需要把width改成height即可

具体属性为:
transition-property:规定应用过渡的CSS 属性的名称。transition-duration:定义过渡效果花费的时间。默认是0。
transition-timing-function:规定过渡效果的时间曲线。默认是"ease"。
transition-delay:规定过渡效果何时开始。默认是 0。

注意:如果网站要求兼容IE
那么还是不建议去使用。因为这个属性只兼容到IE10,IE9及以下不兼容!

来源:德客易采

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章