css中关于transform、transition、animate的区别
写动画经常会用到这几个属性,他们之间有什么区别呢?
1.transform
每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性。它其实只是一个静态属性,需要配合transition和animation才能展现出动画效果。你可以把它看成是跟left、top等属性一样,只是一个静态样式而已。
它可以让元素偏移、伸缩、变形、旋转等。
具体的给设计师改变元素样式用的属性则有以下五个: translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的;
rotate(deg)是用来控制元素旋转角度的;
skew[x,y](deg) 这个属性是用来制作倾斜度的,做过设计的人可能会知道,这个是用来在2d里面创建3d透视图的时候必须的属性;
scale3d(x,y,z) 用来放大缩小效果,属性是比值;
matrix3d,css矩阵。通过这个矩阵属性,涵盖了上面所有的属性值,但是个人觉得可读性极差(全都是数字和单位,背起来有点模糊),目前没有理由推荐使用。
2.transition
它属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本,是给普通做简单网页特效用的。
<div class="transform"></div> .transform{
width:100px;
height:100px;
background: red;
transition: all 1s ease-out;
}
.transform:hover{
transform:rotate(360deg);
}
3.Animation
详细讲解请看我的另外一篇文章:http://www.cnblogs.com/freefish12/p/5510210.html
.context{
width:100px;
height:100px;
background: blue;
left:0;
position:absolute;
}
@keyframes move{
from{
transform: rotateY(180deg);
}
to{
transform: rotateY(360deg);
}
}
.context:hover{
animation: move 0.5s infinite alternate;
} <div class="context">
<div class="sub-context"></div>
</div>
css中关于transform、transition、animate的区别的更多相关文章
- css中的transform,transition,translate的关系
transform 旋转(transform是没有动画效果,你改变了它的值,元素的样子就唰的改变了.其中的位移的函数名就叫translate,所以说,translate是transform的一部分.) ...
- 彻底弄懂css中单位px和em的区别(转)
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- css中单位 px、em 的区别【转载】
原文:http://www.admin10000.com/document/6267.html 在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了p ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- css—动画(transform, transition, animation)
transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...
- CSS中@import与link的具体区别
我们知道在网页中引用外部CSS有两种方式:@import和link 我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 link:link就是把外部CSS与网页连接起 ...
- CSS中link和@import的使用区别
我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...
随机推荐
- 在Hadoop集群上,搭建HBase集群
(1)下载Hbase包,并解压:这里下载的是0.98.4版本,对应的hadoop-1.2.1集群 (2)覆盖相关的包:在这个版本里,Hbase刚好和Hadoop集群完美配合,不需要进行覆盖. 不过这里 ...
- 怎样在 Swift 项目中使用 CocoaPods
4个步骤,将 CocoaPods 导入 Swift 1.创建.编辑 Podfile 文件并 pod install 2.使用 File -> New -> File- 创建一个 Heade ...
- Android 4.4 Kitkat Phone工作流程浅析(六)__InCallActivity显示更新流程
本文来自http://blog.csdn.net/yihongyuelan 转载请务必注明出处 本文代码以MTK平台Android 4.4为分析对象,与Google原生AOSP有些许差异,请读者知悉. ...
- css阴影--box-shadow的用法
原文:http://blog.csdn.net/freshlover/article/details/7610269 text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边 ...
- Objective-C——NSMutableURLRequest发送POST请求,使用NSJSONSerialization解析JSON字符串
NSString *reqData = @"Data="; NSData *postDatas = nil; NSString *urlPath = @"url" ...
- E - The King
Description Once upon a time in a country far away lived a king and he had a big kingdom. He was a v ...
- Memcache 在win7x64中安装配置
Memcached从0.2.0开始,要求PHP版本大于等于5.2.0. 环境:phpstudy集成环境 目标:实现php用memcache 下载:memcache for win 64 http:// ...
- 自定义View 一 (继承VIew重写onDraw方法)
项目:具有圆形效果的自定义View 一.继承View并重写onDraw方法 public class CircleView extends View{ private static final int ...
- windows下qtcreator添加ICE库文件
由qtcreator手动添加外部库,会自动生成: win32:CONFIG(release, debug|release): LIBS += -L$$PWD/C:/ZeroC/Ice-/lib/vc1 ...
- Oracle EBS-SQL (INV-8):检查物料入库明细信息.sql
select a.vendor_number 供应商编码 ,a.vendor_name 供应商名称 ,a.item_nu ...