transform，过渡transition，animations动画

日常复习！

transform

先讲2D的吧

2D转换位移           

transform: translateX(100px)；x轴位移100px

transform: translateY(100px)；y轴位移100px

transform: translate(x,y);连写 x，y中间要用逗号隔开。xy都是要带单位的。

可以和定位搭配实现盒子水平居中对齐。

 div{

div{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            transform: translate(-50%, -50%);
}

   transform 盒子向上向左走盒子本身高宽的一半。

注意:transform对行内元素无效。

2D旋转rotate

 transform: rotate(45deg) 顺时针旋转45°， 负值就是逆时针 。

transform-origin 修改旋转中心 可以跟left,right,top,bottom，也可以跟百分比，px。

默认 50% 50% 等价于 center center。

缩放scale

transform: scale(x，y）;()1是1倍 2是2倍 ，逗号隔开

transform: scale(2，2); =transform: scale(2); 

缩放不会影响其他盒子  而且可以设置缩放的中心点

综合写法

 有顺序关系 先位移后旋转  先旋转后位移会改变方向     通常把位移放前面 

transform: translate(1000px, 500px) rotate(3600deg) scale(2);

transition

过渡transition通常和hover搭配使用

Transition-property:CSS属性值/all;

Transition-duration:3s ;过渡时长

Transition-delay:2s;过渡延时

Transition-timing-function:linner..;过渡速度曲线

Transition:CSS属性值/all  3s linner  2s;

选择器{

CSS的属性值

Transition:...(谁做过渡 给谁加 )

}

选择器:hover{

鼠标悬停时对应的CSS属性值

Transition:...

}

animations

@keyframes  自定义的名称{

from{

CSS的属性值、多个

}

to{

CSS的属性值、多个

}

}

@keyframes  username{

0%{}

20%{}

60{}

100%{}

}

from 和0%通常可以省略

选择器{

             animation-name: 自定义; 

             动画名称 

             animation-duration: 5s; 

             持续时间 

             animation-timing-function: ease; 

             运动曲线 linner easer b..() steps() 速度曲线

             animation-delay: 2s; 

             开始时间 

             animation-iteration-count: infinite; 

             重复次数   infinite 无限 

             animation-direction: alternate; 

             反方向播放   默认normal   反方向alternate 

             animation-fill-mode: forwards; 

             播放完停在原地  backwards 默认返回去 

简写：

animation: name duration timing-function delay iteration-count direction fill-mode;

name duration一定要写

}

div:hover {

            animation-play-state: paused;

            /* 鼠标经过就停止 */

        }

steps() steps 就是分几步完成动画 有了它就不要写ease linear。

差不多就这些了，至于transfrom3D，还不是很精通，等彻底搞懂了再来分享吧。

溜了！