CSS 动画 过渡

CSS 3 高级
1.转换（3D ，2D）
转换的简介，转换即变形
1.转换属性 transform:none(默认值) /‘transform-function(转换函数)’   
空格来分割多个转换函数（transform-function()）
2.转换原点（默认中心点）
属性:transform-origin:
取值:按照元素左上点为(0,0)  可以给px 或者百分比或者关键字  top/left/bottom/right
------------------------前面需要加上transform----------------------
2.2D转换
1.位移
函数:  translate()
取值: 数值。百分比。负数
一个值：X值
两个值：X,Y值
单向位移函数:
translateX()
translateY()
---------opacity；0.5；边框透明---------
transform:translate(50px);//一个值X轴
transform:translateX(50px); //单向位移
2.缩放（中心缩放，里面所有东西都会变）
函数：scale()
取值:
1个值：整体缩放比例（比例）
2个值: 分别表示X，Y
可取值:默认值1，放大 大于1，可以取小数        缩小 则小于1
单项缩放函数：scaleX()   scaleY()
transform:scale(2);//放大两倍
transform:scaleX(2);//尽量等比例缩放


---------------下课-------------------------
3.旋转
圆心就是转换原点
函数：rotate(nxdeg) //transform:rotate(+45deg);
x:旋转角度数值
n:"+","-"  顺逆时针
transform-origin:0px 0px;  //transform-origin:50% 50%; transform:rotate(+45deg); 
注意：  旋转连同坐标轴一起转 //意思是线位移，再旋转(好像和canvas画布的,画布旋转类似)
4.倾斜：  正方形---->平行四边形(这个比较少使用,好像)
函数：skew(deg,deg)
transform:skewX(deg);
transform:skewY(deg); //指的是那个角度45度



-------------------------------
小练习


3D转换  --模拟3D
元素沿着Z轴，发生转
属性:perspective: 100px;   人眼到3D视图的距离
意义：定义距离   标识元素可以发生3D转换       
元素要放在父元素上。而不是自己转换
浏览器兼容性不太好
-webkit-perspective
3D位移


函数:translateZ(z)//Z
    translate3D(x,y,z)
3D的旋转
rotateX(deg); 扑倒
rotateY(deg); 翻身
rotateZ(deg); 转圈
rotate3d(x,y,z,deg);  0转 1不转   （0，0，1，30deg）只有轴做旋转
------------------午休吧--------------------------


能缩放   好像不能倾斜     大小写不重要
2.过渡   自己的笔记
1。属性transtion-property
规定设置过渡效果的 CSS 属性的名称。

selector{   transition-property:background;}
能够实现过渡样式的CSS属性
颜色:文本颜色，背景颜色
取值数值为：宽，高，字体大小
转换属性:transform
渐变属性:background:liner-gradient...
visibility:
阴影：
透明度：
2.过渡时间，默认值为0
属性:transition-duration:填时间
规定完成过渡效果需要多少秒或毫秒。

selector{ transition-property:background;   transition-duration:ls; }
注意：必须设置过度属性。默认为0；
3.过渡时间曲线函数
属性:transition-timing-function
规定速度效果的速度曲线

取值：ease 默认值 慢-->快-->慢
linear:线性   匀速，平缓的意思
easy-in:慢--->一直加速
easy-out:快速开始--->减速效果
easy-in-out:慢---加速---减速---满减速
selector{transtion-timing-function:easy;}

4.打酱油的  ，过渡的延时
以时间作单位,从何时开始执行

属性:transition-delay:时间;
5.过渡综合属性
transition:property duration timing-function delay;
3.如何触发过渡效果
用户行为（点击，行为）
:hover 一些伪类也是可以的
4.过度属性定义在哪里
位置不一样，效果也不一样。
一定不要忘记延时


其实有用的就一句
transition:property duration timing-function delay;
一般就写
transtion: 属性  延时;

transition:  all 延时;(延时需要些单位的)

中间可以使用多个","分割,  写法不变

  transition: background-color 2s,width 2s,height 2s,transform 5s;

------------------做个练习--------------------

=======================过渡到此结束(动画来代替过渡)==========================
3.关于动画
多个属性状态之间的做平缓过渡效果
浏览器兼容性问题，尽量全部加前缀
-webkit-
-moz-
-o-
创建和使用的步骤
1.声明动画
起名
使用@keyframes 声明动画关键帧（特殊时间点的状态）
突然想起了@font-face{ 感觉差不多}
2.调用动画
属性：animation:               ----animate
以上那个属性调用动画名称
设置相关操作
--------------------------------------------
4.声明动画
@keyframes  (@-webkit-keyframes)
语法:
@keyframes 动画名称{
from( | 0%  二者都行){
//开始状态，CSS属性
width:200px;
}


10%{
width:300px;
}
to( | 100%){
//结束状态
width:400px;
}
}
5.调用动画
属性:animation-name:  动画名称
animation-duration:   一个周期时间（s/ms）
animation-timing-function:  速度执行曲线
animation-delay:  延时；
animation-iteration-count:动画播放次数；    取值： 指定数值\    \infinite(无限次)
animation-direction:normal/alternate(轮播  来回来回  )          播放方向




animation:name duration timing-function delay iteration-count direction;
-webkit-animation:       //这个要注意一下

---------------------
animation-fill-mode: 动画播放元素状态
取值:
none
forwards 保持最后一幁状态；
backwards:动画显示之前  ，逆向播放有效果   （没用）
both:结合 forwards和backwards状态
---------------------------
animation-play-state:   设置播放状态
取值：
paused
running
===============动画结束=======================
小练习