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 转换。

 

CSS3常用属性及用法的更多相关文章

  1. web 开发:CSS3 常用属性——速查手册!

    web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...

  2. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  3. CSS3常用属性

    CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...

  4. CSS3常用属性及效果汇总

    本文转载于<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfor ...

  5. CSS3 RGBA 属性高级用法

    这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...

  6. css3——border-image属性的用法

    项目需求是实现鼠标移到按钮上时,下方显示一张渐变的三角图片,于是想到使用border-image来实现. 实现;//向外偏移10px,可使边框内部的内容不是那么紧凑border-image-repea ...

  7. CSS3常用属性浏览器兼容前缀

    1.检测网站https://gsnedders.html5.org/outliner/ 2.查询是否支持前缀http://caniuse.com 3.border-radius\box-shadow\ ...

  8. CSS3 常用属性

    1------border-radius (盒子圆角 border-radius :border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 2------如果将一个正方形 ...

  9. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

随机推荐

  1. power design设计数据库

    power design是收费软件 大致设计流程: 画出概念数据模型,添加实体,连接实体间关系 生成物理数据模型,可以继续在此基础上修改 生成数据库脚本(一个.sql文件),文件中前面是删除表,后面是 ...

  2. Httpd 文件服务器的搭建

    服务器信息 系统: CentOS 安装操作 安装 httpd 直接通过 yum 安装: yum install httpd 安装完成之后,可以检查版本: http 查看版本 httpd -versio ...

  3. Django_shell命令操作

  4. PHP CURL HTTPS POST

    PHP CURL HTTPS POST function vpost($url,$data){ // 模拟提交数据函数    $curl = curl_init(); // 启动一个CURL会话    ...

  5. 分享到twitter,facebook,google,yahoo,linkedined,msn

    编辑器加载中... 1. 分享到twitter的代码” title=”分享到 Twitter” target=”_blank” rel=”nofollow”>Twitter 2. 分享到Face ...

  6. WPF中Image控件的Source属性

    原文:WPF中Image控件的Source属性 imgBook 是一个Image控件,在后台代码中我想给它指定Source的属性.我先如下方式进行: Uri uri = new Uri(strImag ...

  7. wampserver-mysql创建数据库

    首先打开wampserver,在右下角会出现一个这样的图标,左键单击它,选择MYSQL->MYSQL控制台 输入密码 创建一个新的数据库:create database XXX 注意要输“;”, ...

  8. 基于Pipe的PureMVC FLEX框架的多核共享消息技术

    pipes utilities,也就是所谓的通道(管道),为什么要使用通道呢?模块的结构都是一个单独的puremvc结构,模块和模块,shell和模块之间的通信 不能使用puremvc中的消息进行,因 ...

  9. Codeforces 429D Tricky Function 近期点对

    题目链接:点击打开链接 暴力出奇迹. 正解应该是近期点对.以i点为x轴,sum[i](前缀和)为y轴,求随意两点间的距离. 先来个科学的暴力代码: #include<stdio.h> #i ...

  10. Visual Studio Set Project Environment Variables

    Visual Studio Set Project Environment Variables eryar@163.com In Visual Studio you can specify chang ...