CSS3之 transform和animation区别
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区别的更多相关文章
- 2018年1月17日总结 css3里transition 和animation 区别
transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>> a. 在做项目中经常会遇见 ...
- css3 变形(transform)、转换(transition)和动画(animation)
http://www.w3cplus.com/content/css3-transform/ 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...
- CSS3(transform/transition/animation) 基础 总结
1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...
- css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
- zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...
- CSS3 3D Transform
CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- 小tips: zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
随机推荐
- 集成学习_Bagging 和随机森林(rf)
集成学习方式总共有3种:bagging-(RF).boosting-(GBDT/Adaboost/XGBOOST).stacking 下面将对Bagging 进行介绍:(如下图所示) ...
- JavaScript day3(数据类型)
数据类型(data type) JavaScript提供七种不同的数据类型(data types),它们是string(字符串), symbol(符号), number(数字), undefined( ...
- (C/C++学习)4.C++类中的虚函数表Virtual Table
说明:C++的多态是通过一张虚函数表(Virtual Table)来实现的,简称为V-Table.在这个表中,主要为一个类的虚函数的地址表,这张表解决了继承.覆写的问题,保证其真实反应实际的虚函数调用 ...
- hdu 3657最大点权独立集变形(方格取数变形)
/* 分奇偶为二部图,s与奇建图,t与偶建图,权值为当前数的值,如果遇到必取的权值置为inf. 奇偶建边为相邻的权值为2*(x&y):所有数的值-最小点全覆盖. 置为inf意为不能割掉.奇偶边 ...
- [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 ...
- IntelliJ 启动不同端口的两个spring cloud项目
IntelliJ 启动不同端口的两个spring cloud项目 1,使用maven进行clean package 2,在Terminal界面,输入java -jar xxx.jar --server ...
- Android Gallery2源代码分析
打开图库中图片为什么从模糊变清晰 1. 有一点要明白,图片要进行显示,首先要先将图片进行decode,然后才干显示 2. 图片decode须要时间,越大的图片,细节越多的图片,那么它decode时间就 ...
- erlang Unicode 处理
最近在使用erlang做游戏服务器,而字符串在服务器编程中的地位是十分重要的,于是便想仔细研究下字符编码,以及erlang下的字符串处理.先从Unicode开始吧.... [Unicode] Unic ...
- c++ 基于Policy 的 模板编程
在没真正接触c++ 模板编程之前.真的没有想到c++ 还能够这么用.最大的感触是:太灵活了,太强大了. 最初接触模板威力还是在Delta3d中,感觉里面的模板使用实在是灵活与方便,特别是dtAI中使 ...
- C#可定制的数据库备份和恢复程序 (讲解流程)
可定制的数据库备份和恢复程序 tashanzhishi [原作] 关键字 数据库 备份 恢复 出处 在我们做数据库系统的程序时,经常需要为客户做一个数据库的备份和恢复程序,特别是对于一些非专业的数据库 ...