css3中用什么来定义过渡动画的时间（css3透明度与过度属性）

本文目录

• css3透明度与过度属性
• 如何用CSS3做过渡效果(transition)与动画(animation)麻烦告诉我
• 前端（过渡动画）

css3透明度与过度属性

opacity:x    x值为0~1，值越小越透明，在ie低版本的不支持

filter:alpha(opacity=x)  x值为0~100，值越小越透明， ie低版本支持filter:alpha(opacity=x)

background: rgba（）：也可以改变透明度，a的值为0~1，值为1时完全不透明

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

过渡属性（ transition-property ）：transition-property 过渡或动态模拟的CSS属性，property：指定的CSS属性（width、height、background-color属性等）all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

过渡所需的时间（ transition-duration ）：定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

过渡动画函数（ transition-timing-function ）：指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

transition-delay 过渡开始出现的延迟时间

练习：

linear  规定以相同速度开始至结束的过渡效果

ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果 (一开始会很慢 后面快结束的时候会加快)

ease-out    规定以慢速结束的过渡效果 (一开始会很快 后面快结束的时候会变慢)

ease-in-out 规定以慢速开始和结束的过渡效果

过渡延迟时间（ transition-delay ）正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发 2s

负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 速度会变快 -2s 会出现卡顿

0：默认值，元素过渡效果立即执行

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系，z-index值大的层位于其值小的层上方

总结：网页中的元素都含有两个堆叠层级，未设置绝对定位时所处的环境，z-index是0，设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定，改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可。

如何用CSS3做过渡效果(transition)与动画(animation)麻烦告诉我

div.trans { width:100px; height:100px; background:gray; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div.trans:hover { width:300px; } div.ani { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /*Firefox*/ -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-moz-keyframes mymove /*Firefox*/ { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准，一些成员认为过渡效果和动画并非样式属性，而且已经可以用脚本实现。语法：transition: property duration timing-function delay;说明：ValueDescriptiontransition-property指定要改变CSS属性的名称transition-duration指定过渡效果要花多少时间(s/ms)transition-timing-function指定过渡效果的速度transition-delay定义过渡效果的延迟时间.实例：《style type="text/css"》 div { width:100px; height:100px; background:red; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } 《/style》 《div》《/div》 2. AnimationCSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。下面看下一个简单的实例：《style type="text/css"》 div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /*Firefox*/ -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-moz-keyframes mymove /*Firefox*/ { from {left:0px;} to {left:200px;} }@-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } 《/style》 《div》《/div》 语法：animation: name duration timing-function delay iteration-count direction;说明：ValueDescriptionanimation-name指定动画帧的名称animation-duration指定动画运行的时间:秒(s)和毫秒(ms)animation-timing-function指定动画运行的速度animation-delay指定动画的延迟时间animation-iteration-count指定动画的重复数animation-direction指定动画是否以相反的方向运行动画

前端（过渡动画）

css3 新增的有：过度动画阴影，圆角
transition：width（宽度产生动画）
1 在哪产生动画
2 动画消耗的时间
3 运动曲线
4 延长多长时间才开始执行动画，（不写就不执行）规定过度效果的曲线，默认是ease，多个用，（逗号）隔开，过度属性：transition
圆角： border - radius，如果不想写那么多的话就用
transition：all is ease
transition：all is linear 匀速
transition：all is ease 开始和结束 慢速 中间加速
transition ：all is ease - in . 开始的时候慢，越来越快，然后停止；
transition : all is ease - out . 开始时快，越来越慢，然后停止；
transition : al is ease-in -out .开始和结束时慢速
如果子元素超出父元素时 : overflow : hidden;
rgba(0 ,0, 0,0.5 );半透明；
line-height 行高；margin : 20px,间距20px,info信息
tansfrom 变形
1.位移 ， 2.缩放 ， 3.旋转 ， 4.斜切 ，
1.位移 transition(50px，50px) 水平和垂直；
是不会影响文档流的 ，自己动 不会影响下边的；
2.旋转 transition:rotate（30deg）沿着z 轴旋转 ；
3.缩放 transitiion ：scale(0.5,0.2) 宽度 高度；
4.斜切 transition : skew(0,45deg ) x轴不动，y轴斜切45度；水平和垂直；
margin : 50px(上边距) auto 0;
元素旋转
transfrom : rotate(45deg) 默认是沿着z轴旋转；
transfrom : perspective(800px ) rotate(45deg)
perspective 设置透视距离，经验数 800px ，比较符合人眼的透视距离；
transfrom -style ： perseve-3d ,设置盒子按3d空间显示；
变形中间点
div : nthchild{} ;第几个孩子；
transfrom-origin:left center, 设置变形的中心点 (左中)；
transfrom-origin:left top,设置变形的中心点 (左上)；
背面可见
margin : 上，右，下，左，
如果不想变的话 加过度 transfom:all 500ms ease;
800是经验值 起始角度 rotatey (0deg);
有透视效果 transfrom -style : preserve -3d;
设置盒子背面是否可见
backface - visibity : hidden; 背面不可见 （隐藏不可见）；
图片翻面时另一张图片
animation 动画
多个设置用空格隔开；
animation : moving 1s ease(运动曲线) 1s(延迟) 5(动的次数 ) alternat(是否返回)
alternate 设置是否返回；
infinite 不限次数；
动画运岁动的状态 ： 暂停 animation-play-state : paused;
动画运动的状态 ： 运行 animation-play-state : running;
forwards 动画结束最后状态；
both 都 起始和结束都设置；
@keyframes 创建关键动画时；声明一个动画，给他后面随便起一个名字；
动画一个状态到另一个状态；
隐藏 overflow : hidden;
相对定位 ：position : relative;
绝对定位 : positiion : absolute;
动画定义的关键字:
@keyframes 名字{ 起始状态 from
终止状态 to }
from 开始 ，to 结束；
循环一直走 ：infinte ;
transfrom : scaley;
多帧动画
位移动画 transfrom : tanslateY(Y轴) 10px;
圆角 border - ralios : 50px;
原路返回 ： alternate;
缩放 transfrom : scale(0.5 0.5)
box-shadow : 17px(X轴) 13px（Y轴）12px(羽化) 14px(扩展) p