transform transition animation 总结

transform常用的属性：

rotate(30deg) 顺时针旋转30度

scale(x,y)/scale(num)/scaleX()/scaleY() 当里面是正数为放大几倍，当为负数时字体翻转不是缩小，当参数为小于1的小数时，缩小。

skew(30deg,20deg) 盒子倾斜角度。

translate(-50%,-50%)盒子中心与父盒子（0,0）点重合

transform: scale(0.2) rotate(30deg);串联操作。

transition 过度 常用属性：

#box{

background-color: red;

width: 150px;

height: 100px;

}

#box:hover{

background-color: yellow;

font-size: 20px;

transform: rotate(30deg);

transition-property: background-color font-size transform;

transition-duration: .5s 5.5s .5s;

transition-delay: 1s;

}

transiition-property,要对那些属性进行操作

tansition-duration,每个变换多长时间完成呢？

transition-delay,再动作开始前延长时间。

transition 的快捷方式：

transition：all 1s ease-in .5s

all 代表所有属性 transition-property

过度的时间 transition-duration

变化的快慢 transition-timing-function

延长的事件 transition-delay

transition: color 1s,background 1s,border-color .5s 1s;

animation:动画：

.back{

width: 200px;

height: 200px;

background:red;

animation-name: fadeIn;

animation-duration: 5s;

animation-timing-function: linear;

animation-iteration-count: 2;

animation-direction: alternate;

}

.back:hover{

animation-play-state: paused;

}

@keyframes fadeIn {

from{

opacity: 0;

}

to{

opacity: 1;

}

}

设置动画先设置@keyframes 动画名 {

from{

}

x%{

}

to{

}

然后再盒子中写animation-name 进行绑定

animation-duration: 5s;动画持续时间

animation-timing-function: linear;动画变化方式，线性、先慢后快 等

animation-iteration-count: 2; 动画执行几遍？

animation-direction: alternate;第一遍从无到有，第二遍从有到无

animation-fill-mode：forwards 保留动画结束时的状态。

当鼠标放上去时animation-play-state: paused;动画停止

animation的快捷方式：

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

animation:fadeOut 2s easy-in-out 2 alternate 5s forwards;