过度动画

css3过度动画

css3都有哪些新增的东西 : 过度,动画,阴影,圆角;

transition : width (宽度产生动画)500ms;

1.在哪产生的动画 ,2.动画消耗的时间  3.运动曲线;4.延长多长时间才开始执行动画,(不写就不直行)

规定过度效果的曲线,默认是 ease;  多个用 ,(逗号)隔开,

过度属性 : transitio;

圆角 : 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 [ left 0px]

终止状态 to [ left 0px,]}

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(扩展) pink(颜色);

box-shadow : 180px(水平偏移) 20px(垂直) 17px(羽化) 0px(扩展) pink(颜色) inset;

写上inset 是内部阴影,不写是外部阴影

你可能感兴趣的:(过度动画)