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. 集成学习_Bagging 和随机森林(rf)

       集成学习方式总共有3种:bagging-(RF).boosting-(GBDT/Adaboost/XGBOOST).stacking      下面将对Bagging 进行介绍:(如下图所示) ...

  2. JavaScript day3(数据类型)

    数据类型(data type) JavaScript提供七种不同的数据类型(data types),它们是string(字符串), symbol(符号), number(数字), undefined( ...

  3. (C/C++学习)4.C++类中的虚函数表Virtual Table

    说明:C++的多态是通过一张虚函数表(Virtual Table)来实现的,简称为V-Table.在这个表中,主要为一个类的虚函数的地址表,这张表解决了继承.覆写的问题,保证其真实反应实际的虚函数调用 ...

  4. hdu 3657最大点权独立集变形(方格取数变形)

    /* 分奇偶为二部图,s与奇建图,t与偶建图,权值为当前数的值,如果遇到必取的权值置为inf. 奇偶建边为相邻的权值为2*(x&y):所有数的值-最小点全覆盖. 置为inf意为不能割掉.奇偶边 ...

  5. [TJOI2014] [Bzoj3996] 线性代数 [网络流,最小割]

    由原式,可以推出D=Σ(i=1,n,Σ(j=1,n,A[i]*A[j]*B[i][j]))-Σ(i=1,n,A[i]*C[i]) $D=\sum\limits_{i=1}^{n}\sum\limits ...

  6. IntelliJ 启动不同端口的两个spring cloud项目

    IntelliJ 启动不同端口的两个spring cloud项目 1,使用maven进行clean package 2,在Terminal界面,输入java -jar xxx.jar --server ...

  7. Android Gallery2源代码分析

    打开图库中图片为什么从模糊变清晰 1. 有一点要明白,图片要进行显示,首先要先将图片进行decode,然后才干显示 2. 图片decode须要时间,越大的图片,细节越多的图片,那么它decode时间就 ...

  8. erlang Unicode 处理

    最近在使用erlang做游戏服务器,而字符串在服务器编程中的地位是十分重要的,于是便想仔细研究下字符编码,以及erlang下的字符串处理.先从Unicode开始吧.... [Unicode] Unic ...

  9. c++ 基于Policy 的 模板编程

    在没真正接触c++  模板编程之前.真的没有想到c++ 还能够这么用.最大的感触是:太灵活了,太强大了. 最初接触模板威力还是在Delta3d中,感觉里面的模板使用实在是灵活与方便,特别是dtAI中使 ...

  10. C#可定制的数据库备份和恢复程序 (讲解流程)

    可定制的数据库备份和恢复程序 tashanzhishi [原作] 关键字 数据库 备份 恢复 出处 在我们做数据库系统的程序时,经常需要为客户做一个数据库的备份和恢复程序,特别是对于一些非专业的数据库 ...