动画transform,transiton,animation

2D动画:
transform:translate(100px,100px); //移动,也可transform:translateY(100px);
transform:scale(0.6); //缩放,缩放成原来的60%,也可以给2个值,分别是长和宽
transform:rotate(180deg); //旋转
transform:skew(30deg ,40deg) //倾斜
transform-origin:left top; //改变动画的基准点,默认是正中,left top是左上,0 0也是左上,也可以30px 0,也可以30% 0


3D动画:(尽量加4前缀)
perspective(1000px); //3d必须定义这个,而且是给父元素定义
transform-origin:left top; //改变动画的基准点
transform:translate3d(0,0,-300px); //移动
transform:rotate3d(1,0,0,45deg); //旋转,1,0,0是沿X轴,0,1,0是沿Y轴


css3 transiton 过渡 //不是写在hover里,写在原div
//http://www.hangge.com/blog/cache/detail_988.html //讲解很详细
//http://cubic-bezier.com/#.3,.93,.14,.99 //自定义速度工具
transition:all 1s linear 1s; //属性,过渡时间,速度变化,延迟
transition:width 1s linear, //写法2
           height 1s ease-in-out 1s;


重要重要重要-----------transition动画结束后元素的属性有变化,animation动画结束后元素的属性没有变化-----------------


css3 关键帧动画(动画结束之后元素的属性没有变化)
div{
animation-name:zidingyi; //下面动画的名字
animation-duration:2s; //完成动画的时间
animation-timing-function:ease; //完成动画的速度
animation-delay:1s; //延时
animation-iteration-count:3; //动画次数,infinite是循环
animation-direction:alternate; //动画是否逆向播放,动画次数是2才能看到
(不能简写)animation-play-state:paused; //paused会暂停,running是运行,要结合JS来写
(不能简写,兼容不好)animation-fill-mode:forwards; //forwards完成后停在最后一针,backwards在延迟时就停在第一针,both会同时应用前面两种


简写:animation:zidingyi 2S ease 1s 2 alternate;
}
写法1:
@keyfromes zidingyi{
form{
//变化前的效果
}
to{
//变化后的效果
}
}


写法2:(更常用,要写前缀,少o)
@keyfromes zidingyi{
0%{
//变化前的效果
}
50%{
//变化50%的效果
}
100%{
//变化后的效果
}
}