transition过渡动画
先添加公共样式
@charset "utf-8";
*{
padding: 0;
margin: 0;
}
figure{
width: 33.3%;
height: 300px;
float: left;
overflow: hidden;
position: relative;
}
ul,li{
list-style: none;
}
h2,p,li,div{
position: absolute;
transition: all 0.5s;
color: #000;
}
一、平移动画（上下）
实现原理
通过鼠标滑过元素，改变目标偏移量实现动画效果。
代码实现
CSS部分
.example1 h2{
/* 给h2设置初始位置 */
left:10%;
bottom:30%;
}
.example1 p{
/* 给p设置初始位置 */
left:10%;
top:100%;
}
.example1:hover h2{
/* 适应谷歌浏览器 */
-webkit-transform: translateY(-15px);
/* 适应火狐浏览器 */
-moz-transform: translateY(-15px);
/* 适应IE浏览器 */
-ms-transform: translateY(-15px);
/* 在Y轴的纵向偏移量 */
transform: translateY(-15px);
}
.example1:hover p{
/* 通过改变p标签相对父元素的位置实现动画 */
top:80%;
}
body部分
<figure class="example1">
<h2>平移动画</h2>
<p>滑动显示</p>
</figure>
效果展示
二、平移动画（左右）
实现原理
通过鼠标滑过元素，改变目标偏移量和时间实现动画效果
代码实现
css部分
.example2 h2{
/* 设置h2的初始位置 */
top:20%;
left:15%;
}
.example2 ul li:nth-child(1){
/* 设置滑动后元素的位置改变 */
top:45%;
left:15%;
/* 适应谷歌浏览器 */
-webkit-transform: translateX(-200px);
/* 适应火狐浏览器 */
-moz-transform: translateX(-200px);
/* 适应IE浏览器 */
-ms-transform: translateX(-200px);
transform: translateX(-200px);;
}
.example2 ul li:nth-child(2){
/* 设置滑动后元素的位置改变 */
top:55%;
left:15%;
/* 适应谷歌浏览器 */
-webkit-transition-delay: 0.2s;
/* 适应火狐浏览器 */
-moz-transition-delay: 0.2s;
/* 适应IE浏览器 */
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
/* 适应谷歌浏览器 */
-webkit-transform: translateX(-200px);
/* 适应火狐浏览器 */
-moz-transform: translateX(-200px);
/* 适应IE浏览器 */
-ms-transform: translateX(-200px);
transform: translateX(-200px);;
}
.example2:hover ul li{
/* 适应谷歌浏览器 */
-webkit-transform: translateX(0);
/* 适应火狐浏览器 */
-moz-transform: translateX(0);
/* 适应IE浏览器 */
-ms-transform: translateX(0);
transform: translateX(0);
}
body部分
<figure class="example2">
<h2>平移动画</h2>
<ul>
<li>逐一飞入动画</li>
<li>通过延时达到效果</li>
</ul>
</figure>
效果展示
三、底部滑出
实现原理
通过滑动元素，使目标改变其偏移量实现动画效果
代码展示
css部分
figure {
width: 33.3%;
height: 300px;
float: left;
overflow: hidden;
position: relative;
}
img {
height: 100%;
transition: all 1s;
}
ul,
li {
list-style: none;
}
h2,
p {
/* 添加绝对定位属性 */
position: absolute;
transition: all 0.5s;
color: #000;
}
.example3 h2 {
top: 50%;
left: 15%;
}
.example3 p{
width: 100%;
/* 设置p标签的初始位置 */
bottom: 0;
line-height: 24px;
text-indent: 50px;
/* 适应谷歌浏览器 */
-webkit-transform: translateY(50px);
/* 适应火狐浏览器 */
-moz-transform: translateY(50px);
/* 适应IE浏览器 */
-ms-transform: translateY(50px);
/* 设置默认偏移量 */
transform: translateY(50px);
}
.example3:hover p{
/* 适应谷歌浏览器 */
-webkit-transform: translateY(0);
/* 适应火狐浏览器 */
-moz-transform: translateY(0);
/* 适应IE浏览器 */
-ms-transform: translateY(0);
/* 恢复原始的偏移量 */
transform: translateY(0);
}
body部分
<figure class="example3">
<h2>底部滑出动画</h2>
<p>
划过显示
</p>
</figure>
效果展示
注意事项
* 底部滑出和平移的区别
实现原理不用，平移利用改变元素位置，底部滑出是通过改变元素偏移量，可根据需求选择方法。
四、旋转动画
实现原理
通过旋转改变元转改变元素偏移量，使用rotate方法
*rotate();为一个角度值，单位deg，可以为正数或者负数，正数是顺时针旋转，负数是逆时针旋转。
代码实现
css部分
.example5 h2 {
left: 20%;
top: 20%;
}
.example5 div {
width: 70%;
height: 70%;
/* 设置盒子的初始位置 */
left: 15%;
top: 15%;
border: 2px solid #f66;
/* 适应谷歌浏览器 */
-webkit-transform: translateY(-350px) rotate(0);
/* 适应火狐浏览器 */
-moz-transform: translateY(-350px) rotate(0);
/* 适应IE浏览器 */
-ms-transform: translateY(-350px) rotate(0);
transform: translateY(-350px) rotate(0);
}
.example5:hover div {
/* 适应谷歌浏览器 */
-webkit-transform: translateY(0) rotate(360deg);
/* 适应火狐浏览器 */
-moz-transform: translateY(0) rotate(360deg);
/* 适应IE浏览器 */
-ms-transform: translateY(0) rotate(360deg);
transform: translateY(0) rotate(360deg);
}
body部分
<figure class="example5">
<h2>旋转飞入</h2>
<div></div>
</figure>
效果展示
五、缩放
实现原理
通过缩放scale属性实现，改变原始缩放倍数实现动画效果
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放倍数）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放倍数）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
代码实现
css部分
.example7 h2 {
left: 40%;
top: 40%;
}
.example7 div {
width: 70%;
height: 70%;
border: 2px solid #000;
left: 15%;
top: 15%;
/* 设置初始缩放倍数 */
/* 适应谷歌浏览器 */
-webkit-transform: scale(1.5);
/* 适应火狐浏览器 */
-moz-transform: scale(1.5);
/* 适应IE浏览器 */
-ms-transform: scale(1.5);
transform: scale(1.5);
}
.example7:hover div {
/* 滑过后改变缩放倍数 */
/* 适应谷歌浏览器 */
-webkit-transform: scale(0.75);
/* 适应火狐浏览器 */
-moz-transform: scale(0.75);
/* 适应IE浏览器 */
-ms-transform: scale(0.75);
transform: scale(0.75);
}
body部分
<figure class="example7">
<div></div>
<h2>缩放</h2>
</figure>
效果展示
六、总结
*注意事项
1.掌握 transition 属性
（1）transition: 属性是个复合属性
transition-property： 规定设置过渡效果的 css 属性名称
transition-duration： 规定完成过渡效果需要多少秒或毫秒
transition-timing-function：指定过渡函数, 规定速度效果的速度曲线
transition-delay： 指定开始出现的延迟时间
（2）默认值为：transition: all 0 ease 0;
（3）有多个 css 属性的过渡效果时：
transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
2.添加对应浏览器前缀，避免不兼容情况
