animation和transform以及响应式布局相关知识

animation以及transition

transition:width(过渡方式） 时间s 方向 延迟时间

过渡方式：ease:先慢后快在慢 linear:线性 ease-in:慢速开始 ease-out:慢速结束 ease-in-out:慢速开始慢速结束

transform：

属性：scale:表示放大的倍数

transformx,transformy与transition联合使用，可以实现遇到照片相应的信息弹出来的效果；

rotate(旋转）rotatex rotatey rotatez三个属性 （单位是deg)

perspective:透视的；（写在属性最开始的位置）

颜色的渐变：linner-gradient（方向 开始颜色 结束的颜色）

background:linear-gradient(to bottom,#e1e1e1,#c1c1c0);

box-shadow:left值 top值 模糊值 扩大值 影子颜色 阴影方向（inset outset)

3D相关语法

perspective-origin:景深-基点位置，观察元素的角度

transform:x

响应式：

@media screen and(max-width:640px){} 意思不超过640px 将会采用如下的样式；

@keyframes (关键帧）

@keyframes 名字{

30%{

transform:scale(1.3)}

100%{

transform:scale(1)}

}

....animation :名字 时间 infinite;

animation-name:设置动画的名字；

animation-duration:动画持续时间

animation-delay:动画的延迟时间

animation-iteration-count:动画重复次数，默认为1；infinite;无限重复

animation-timing-function：动画的运动形式；

li:hover img{
    animation:move 0.5s;
}
@keyframes move {
0%{
    transform: translate(0,0);
}
    60%{
        transform: translate(0,-60px); opacity: 0;
    }
    61%{
        transform: translate(0,30px); opacity: 0;
    }
    100%{
        transform: translate(0,0); opacity: 1;}}