CSS中的变形、过渡、动画效果

一、变形 、过渡效果

1：元素平移 x方向 y方向

transform:translate(100px 100px);

2：过渡动画效果

a：什么属性参与过渡效果

b：过渡时间

c：过渡的效果 值包含：

d: 延迟时间

ease ease-in ease-out ease-in-out linear

cubic-bezier(n,n,n,n)其中n大于等于0小于等于1

transition: all 1s ease 3s;

3：元素缩放

transform: scale(1.5);

4：元素二维旋转

rotatex:以x轴为中心旋转

rotatey:以y轴为中心旋转

transform: rotate(180deg);

5：元素倾斜

skewx:以x轴为中心倾斜

skewy:以y轴为中心倾斜

transform: skew(30deg);

二、CSS3动画效果

@keyframes colorChange

1：动画名称

animation-name: colorChange;

2：动画时常

animation-duration: 10s;

3：动画速度曲线

animation-timing-function: ease-in;

4：动画延迟时间

animation-delay: 2s;

5：动画播放次数 n:播放次数 ；infinite：无限次播放

animation-iteration-count: 2;

6：动画在下一个是否逆向播放 alternate:反向

animation-direction: alternate;

7：播放完后状态

animation-fill-mode: forwards;