tranform:对象图形变形
tranform的属性包括:
 
1、none 表示不进行变换;
 
2、rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数。
需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值(50px 70px)。//也就是说要看要基于哪一点旋转。
 
3、skew  扭曲             transform:skew(30deg,30deg)  skew(相对x轴倾斜,相对y轴倾斜)
 
4、scale  缩放             transform:scale(2,3) 横向放大2倍,纵向放大3倍。如等比放大写一个参数即可。
 
5、translate 移动        transform:translate(50px, 50px);
 
6、perspective 镜头到元素平面的距离,所有元素都是放置在z=0的平面上,比如perspective(300px)表示,镜头距离元素表面的位置是300px;//该属性要放在动作属性之前
 
 
transition:对象的属性动画
transition: property duration timing-function delay;
 
描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
 
eg:
.div{width:10px;}
.div:hover{transition:width:100px 2s  ease-in-out 1s;}//1s后div原来width:10px变为100px,所花时间为2s,速度为先加速再减速。
值得深入理解的transition-timing-function状态变化速度,默认值是ease,不是匀速,是逐渐变慢。
除了ease之外,还有包括1、linear:匀速;2、ease-in:加速;3、ease-out:减速;4、cubic-bezier函数:自定义速度曲线模式。(可以用工具网站来定制http://cubic-bezier.com/#.17,.67,.83,.67);
 
transition的使用注意:
1、目前,各大浏览器(包括IE10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。
2、不是所有的css属性都支持transition,完整的列表查看(http://oli.jp/2010/css-animatable-properties/),以及效果(http://leaverou.github.io/animatable/);
3、transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0变到100px;transition可以算出中间状态,也就是说,如果开始或结束的设置是height:auto,那么不会产生动画效果。类似的情况还有display:none到block,background:url(1.jpg)到url(2.jpg)等。
transition的局限:
1、需要时间触发,所以没法再网页加载时候自动发送;
2、一次性的,不能重复发生,除非一再触发;
3、只能定义开始状态和结束状态,不定定义中间状态,也就是只有两个状态;
4、一条transition规则,只能定意思一个属性变化,不能设计多个属性。
 
animation:与元素绑定动画效果,是transition属性的扩展,弥补他的不足。
animation: name duration timing-function delay iteration-count direction;
 
描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
 
在学animation之前首先要先弄懂keyframes,叫做关键帧。
keyframes是什么呢,前面我们再使用transition制作一个简单的transition效果时候,我们包括了初始属性和最终属性,一个开始执行动作时间和延续动作时间以及动作的变换速率,其实这些都是一个中间值,如果我们要控制得更细一点,比如说我要第一时间段执行什么动作效果,第二个时间段执行什么动作,transition就无法实现,此时,我们可以使用keyframes关键帧来控制。
keyframes的语法:
@keyframes animationname {keyframes-selector {css-styles;}}
描述
animationname 必需。定义动画的名称。
keyframes-selector

必需。动画时长的百分比。

合法的值:

  • 0-100%
  • from(与 0% 相同)
  • to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。
eg:
@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}
animation:mymove 5s ease 0s infinite alternate
先用keyframes定义一个mymove的动画名字,总共分成五个阶段的状态(如上述代码),然后animation调用,动画无延迟,无限次无限循环,历时5s。

css3 tranform  transition animation的更多相关文章

  1. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

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

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

  3. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  4. 弄清 CSS3 的 transition 和 animation

    弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...

  5. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  6. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  7. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  8. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  9. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

随机推荐

  1. URL与URI的区别

    URI—Universal Resource Identifier通用资源标志符Web上可用的每种资源如HTML文档.图像.视频片段.程序等都是一个来URI来定位的URI一般由三部组成①访问资源的命名 ...

  2. OD: Universal Shellcode

    本节讲如果开发通用的 Shellcode. Shellcode 的组织 shellcode 的组织对成功地 exploit 很重要. 送入缓冲区的数据包括: . 填充物.一般用 0x90 (NOP) ...

  3. Ajax七层模型用途

    Ajax七层模型 OSI七层模型满足所有网格模型 1.物理层:符合标准: 2.数据链路层:如网卡.水晶头.连接网络层等: 3.网络层:路由器(数据外围打IP地址): 4.传输层:两台计算器端口的连接: ...

  4. Android WifiDirect 学习(三) 一些基础知识和问题

    P2P架构介绍 P2P架构中定义了三个组件,一个设备,两种角色.这三个组件分别是: P2P Device:它是P2P架构中角色的实体,读者可把它当做一个Wi-Fi设备. P2P Group Owner ...

  5. 高仿QQ即时聊天软件开发系列之二登录窗口界面

    继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因 ...

  6. Struts2:ValueStack

    一.ValueStack     1 .ValueStack是一个接口,在struts2中使用OGNL(Object-Graph Navigation Language)表达式实际上是使用       ...

  7. Jquery 网站保存信息提示消息实现,提示后自动消失

    现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用alert提示消息,采用jQuery提示完消息,自动消失 css <style> #tip_message { z-in ...

  8. 青蛙的约会(POJ 1061 同余方程)

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 103802   Accepted: 20198 Descript ...

  9. C 小写字母编程大写并输出

    main(){ FILE *fp; char str[100],filename[10]; int i=0;if((fp=fopen("test","w"))= ...

  10. 手动替换GCC版本

    当我们的系统里面会有2个以上版本的gcc时,系统会缺省的默认一个gcc版本,当然我们可以更改系统的默认配置,来降低gcc.g++的版本以满足不同的需求. 1.查看GCC的版本信息 $ls /usr/b ...