CSS专题之动画

三个关键属性&＃xff1a;transform   transition   animation

基本知识&＃xff1a;

1、变形Transform

   1.1、缩放scale    transform&＃xff1a;scale(0.5&＃xff0c;1.5)  //水平缩小50%&＃xff0c; 垂直扩大150%&＃xff0c;只有一个参数时两个方向一样

   1.2、倾斜skew  transform&＃xff1a;skew(30deg&＃xff0c;30deg)//两个方向的倾斜&＃xff0c; 只有一个参数时表示水平倾斜&＃xff08;左上&＃xff09;

   1.3、移动translate   transform&＃xff1a;translate(30px&＃xff0c;30px)//两个方向 的平移&＃xff0c;只有一个参数时表示水平平移&＃xff08;右上&＃xff09;

   1.4、旋转rotate    transform:rotate(45deg)   //顺时针旋转45度

注意&＃xff1a;使用transform方法变形时&＃xff0c;是以元素的基准点进行的&＃xff0c; 使用transform-origin属性可改变基准点&＃xff0c;水平方向可取left  center right,垂直方向可取top center bottom

2、Transition

   Transition:property duration timing-function,参数一指定对哪个参数进行平滑过渡&＃xff0c;参数二指定多长时间内完成过度&＃xff0c;参数三指定用什么方法进行过度

3、Animation 

  使用方法&＃xff1a;

1、创建关键帧(注意:要兼容的话要加上前缀&＃xff0c;如-webkit-等) 

&＃64;keyframes 关键帧集合名{

0%{  代码  }

50%{  代码  }

100%{  代码  }

}

 2、在指定元素上使用关键帧

      -webkit-animation-name: 关键帧名&＃xff1b;

      -webkit-animation-duration:5s;

      -webkit-animation-timing-function:linear;

语法&＃xff1a;

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

animation-direction: normal|alternate;

代码实践&＃xff1a;

.test-transition,.test-transform_translate,.test-transform_scale,
.test-transform_skew,.test-transform_rotate,.test-animate{width: 200px;height: 200px;text-align: center;line-height: 200px;background-color: #ccc;float: left;margin: 20px;border-radius: 100px;
}
.sum{font-family: &＃39;微软雅黑&＃39;;width: 800px;height: 260px;background-color: #ccc;margin: 20px;float:left;
}
.test-transition{transition:background-color 2s linear;
}
.test-transition:hover{background-color: red;
}
.test-transform_translate,.test-transform_scale,
.test-transform_skew,.test-transform_rotate{transition: transform 2s linear;transform-origin:left top;
}
.test-transform_translate{transform:translate(0);
}
.test-transform_translate:hover{transform:translate(150px);
}
.test-transform_scale{transform:scale(1);
}
.test-transform_scale:hover{transform:scale(1.5);
}
.test-transform_skew{transform:skew(0);
}
.test-transform_skew:hover{transform:skew(30deg);
}
.test-transform_rotate{transform:rotate(0);
}
.test-transform_rotate:hover{transform:rotate(360deg);
}
.test-animate{animation:changecolor 4s linear infinite alternate;
}
&＃64;keyframes changecolor{0%{background-color: blue;}50%{background-color: red;}100%{background-color: green;}
}

由于是动画效果&＃xff0c;不好演示&＃xff0c;就不上图了&＃xff0c;可自行copy代码到浏览器看效果