CSS3 有3种和动画相关的属性:transform, transition, animation。其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用

一、transform  描述的是元素静态样式

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。 必须是鼠标移上或者点击执行属性变化,鼠标离开属性回归。说到底就是属性不会变化。配合-webkit-transition: 0.3s;transition: 0.3s;才会有动画的效果,否则会很生硬。

旋转:rote(30deg)    水平面以元素中心旋转多少度;

rotateX(angle)   定义沿着 X 轴的 3D 旋转;

rotateY(angle)   定义沿着 Y 轴的 3D 旋转;

位移 :translate(x,y)   定义 2D 转换;

translate3d(x,y,z)  定义 3D 转换;

缩放:scale(x,y)   定义 2D 缩放转换;

scale3d(x,y,z)   定义 3D 缩放转换;

二、实现动画效果的:transition   animation

    1、transition  

transition 属性是一个简写属性,用于设置四个过渡属性

transition: property duration timing-function delay;

过渡的属性  ,完成过度效果需要时间  ,  速度曲线, 延迟时间

.one1{transition: width 3s linear 2s;}    .one1:hover{width:300px;}

      transition定义了动画的属性、时间、速度曲线以及延迟时间  ;通常和hover等事件配合使用,由事件触发。

     

    2、animation  

animation 属性是一个简写属性,用于设置六个动画属性:

animation的使用必须结合@keyframes animation-name使用

@keyframes  move{

form{ left:0px;}   to{ left:200px;}

          }

在需要动画的元素上面添加动画  div{animation:move 5s infinite;}

animation: name duration timing-function delay iteration-count direction;

   动画名称,动画执行时间,速度曲线,动画延迟时间,播放次数,是否反向播放

animation可以设定每一帧的样式和时间

   

 区别:

    1.  触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则立即播放。

2. 循环。 animation可以设定循环次数。

3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。

4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果,天作之合,比之前只能用js时爽太多。

 

CSS3之 transform和animation区别的更多相关文章

  1. 2018年1月17日总结 css3里transition 和animation 区别

    transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>>  a. 在做项目中经常会遇见 ...

  2. css3 变形(transform)、转换(transition)和动画(animation)

    http://www.w3cplus.com/content/css3-transform/  在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...

  3. CSS3(transform/transition/animation) 基础 总结

    1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...

  4. css3之transition、transform、animation比较

    css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解.    其实, ...

  5. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  6. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  7. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  8. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  9. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

随机推荐

  1. [C#] Linq 动态条件查询

    应用背景:以货品为例,在基础数据中配置货品的判断规则,要根据这个规则筛选出符合条件的集合. 创建货品类 public class Product { public string Name { get; ...

  2. JavaScript:一句代码输出重复字符串(字符串乘法)

    看到一个题目要求写一个函数times,输出str重复num次的字符串. 比如str:bac     num:3 输出:abcabcabc 除了利用循环还有几种方法,我学习研究之后记下以下三种方法. 1 ...

  3. BUAA_OO_博客作业一

    BUAA_OO_博客作业一 (一)程序结构分析 1.代码统计 第一次作业 第二次作业 第三次作业 代码复杂度展示第三次作业的 method ev(G) iv(G) v(G) Constant.Cons ...

  4. noip模拟赛 a

    分析:f(n)就是问有多少对a*b*c = n,如果是Σf(i),那就是问有多少对a*b*c <= n. 这道题和之前做过的一道数三角形的题差不多:传送门,先假设一下a <= b < ...

  5. [bzoj1941][Sdoi2010]Hide and Seek_KD-Tree

    Hide and Seek bzoj-1941 Sdoi-2010 题目大意:给出平面上n个点,选出一个点,使得距离这个点的最远点曼哈顿距离减去距离这个点的最近非己点的曼哈顿距离最小.输出最小曼哈顿距 ...

  6. 任务调度分配题两道 POJ 1973 POJ 1180(斜率优化复习)

    POJ 1973 这道题以前做过的.今儿重做一次.由于每个程序员要么做A,要么做B,可以联想到0/1背包(谢谢N巨).这样,可以设状态 dp[i][j]为i个程序员做j个A项目同时,最多可做多少个B项 ...

  7. linux下环境变量C_INCLUDE_PATH

    环境变量定义一般都是/etc/profile文件(对所有用户有效),或者在Home目录下的.bashrc或.profile(只对当前用户有效)一般系统安装了编译工具之后无需设置这些变量编译都不会出现问 ...

  8. CentOS出错You don&#39;t have permission to access on this server

    检查http.conf发现没错之后.查找资料后发现时selinux的问题,所以须要关闭这个服务: 1 vi /etc/sysconfig/selinux 2 SELINUX=enforcing 改为 ...

  9. 动态配置 JBOSS ( eap 6.2 ) 数据源

    操作环境 windows + jboss eap 6.2 + MyEclipse 10.0 项目用的是jboss eap 6.2,作为Red公司升级后的eap稳定版. 相比之前的 AS 系列,不管是安 ...

  10. python (001)----列表

    Python 的列表数据类型包含更多的方法.这里是所有的列表对象方法: list.append(x) 把一个元素添加到列表的结尾,相当于 a[len(a):] = [x]. ""& ...