前端开发之CSS基础知识05-过度、动画、帧动画

过渡动画：
transition 过度动画

四个参数 过渡方式-->过度所需时间-->何种曲线-->--开始时间、、

例如: {
transition width 0.4s ease 0.1s;
}

2Di变形:
transform 2D变形

移动: transform:translate
例如{
transform:translate(x,y); 100px,20px
}

让盒子子盒子水平垂直居中的新方法：
子盒子:{
margin：50% auto; 这里的垂直50%是以左上角定位算的，所有子盒子本身还要在往上除以盒子的高的2倍

再加上这句

transform:translate(0,-50%);x,y 上移盒子本上高度的50%，就可以做到水平垂居中
}

缩放:transform:scale(x,y)

例如div:hover{
transform;scale(0.2);
}

旋转：transform:rotate()

例如 transform(90deg) 90度

注意:设置旋转中心点:transform-origin:right bottom;

斜切：
transform:skew(30deg);

animation 动画

animation:动画名称,动画时间，运动曲线,何时开始,播放次数，是否反方向

animation: move 1.2s linear 0s infinite alternate;
无限重复 反向回来

@keyframes move {
/*from {
transform: scale(1);
background-color: green;
}

to{
transform: scale(1.25);

background-color: red;
}*/

0%{
transform: scale(1);
background-color: yellow;
/*box-shadow: 1px 1px 1px 1px rgba(0,0,0.1);*/
}

50%{
transform: scale(1.2);
background-color: blue;
/*box-shadow: 2px 2px 2px 2px rgba(0,0,0.3);*/

}
100%{
transform: scale(1.7);
background-color: red;
/*box-shadow: 4px 4px 4px 4px rgba(0,0,0.4);*/

}
}