CSS3常用属性及用法
1.transition: 过渡属性，可以替代flash和javascript的效果
兼容性：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
Chrome 25 以及更早的版本，需要前缀 -webkit-。
Safari 需要前缀 -webkit-。
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
} 公司**圆桌用的是 transition: all .2s ease-out; 2.animation属性
兼容性：Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
Internet Explorer 9 以及更早的版本不支持 animation 属性。
公司 脑洞用的是 -webkit-animation: fade_in_left 3s infinite ease-in-out;
@keyframes fade_in_left
{
0% {transform: translateX(-20px);}
50% {transform: translateX(0);}
100% {transform: translateX(-20px);}
}
@-moz-keyframes fade_in_left /* Firefox */
{
0% {-moz-transform: translateX(-20px);}
50% {-moz-transform: translateX(0);}
100% {-moz-transform: translateX(-20px);}
}
@-webkit-keyframes fade_in_left /* Safari 和 Chrome */
{
0% {-webkit-transform: translateX(-20px);}
50% {-webkit-transform: translateX(0);}
100% {-webkit-transform: translateX(-20px);}
}
@-o-keyframes fade_in_left /* Opera */
{
0% {-o-transform: translateX(-20px);}
50% {-o-transform: translateX(0);}
100% {-o-transform: translateX(-20px);}
}
3.transform
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
兼容性：Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
最新文章
- [AC自动机]【学习笔记】
- LeetCode:Two Sum II
- php+mysql预查询prepare 与普通查询的性能对比
- Windows下查看端口冲突的进程
- linux下备份mysql命令
- Linux 网络编程四（socket多线程升级版）
- JavaScript自定义类和对象的方法
- ios--NSCalendar NSDateComponents
- class的使用
- ios9网络请求https适配
- Oracle Form 特殊的默认值 $$variables$$
- ajaxFileUpload用法
- 将svnkit转成dlls时的问题
- selenium笔记(1)
- 从零开始学习微信小程序
- Angular中$watch实现控件改变后实时发送HTTP请求
- PL/SQL学习笔记之函数
- python使用Fabric模块实现自动化运维
- html5拖拽初窥
- [CodeForces-585F]Digits of Number Pi