CSS专题之动画
2015-10-31 14:16
555 查看
三个关键属性：transform transition animation
基本知识：
1、变形Transform
1.1、缩放scale transform：scale(0.5，1.5) //水平缩小50%，
垂直扩大150%，只有一个参数时两个方向一样
1.2、倾斜skew transform：skew(30deg，30deg)//两个方向的倾斜，
只有一个参数时表示水平倾斜（左上）
1.3、移动translate transform：translate(30px，30px)//两个方向
的平移，只有一个参数时表示水平平移（右上）
1.4、旋转rotate transform:rotate(45deg) //顺时针旋转45度
注意：使用transform方法变形时，是以元素的基准点进行的， 使用transform-origin属性可改变基准点，水平方向可取left
center right,垂直方向可取top center bottom
2、Transition
Transition:property duration timing-function,参数一指定对哪个参数进行平滑过渡，参数二指定多长时间内完成过度，参数三指定用什么方法进行过度
3、Animation
使用方法：
1、创建关键帧(注意:要兼容的话要加上前缀，如-webkit-等)
@keyframes 关键帧集合名{
0%{ 代码 }
50%{ 代码 }
100%{ 代码 }
}
2、在指定元素上使用关键帧
-webkit-animation-name: 关键帧名；
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
语法：
animation: name duration timing-function delay iteration-count direction;
animation-direction: normal|alternate;
代码实践：
由于是动画效果，不好演示，就不上图了，可自行copy代码到浏览器看效果
基本知识：
1、变形Transform
1.1、缩放scale transform：scale(0.5，1.5) //水平缩小50%，
垂直扩大150%，只有一个参数时两个方向一样
1.2、倾斜skew transform：skew(30deg，30deg)//两个方向的倾斜，
只有一个参数时表示水平倾斜（左上）
1.3、移动translate transform：translate(30px，30px)//两个方向
的平移，只有一个参数时表示水平平移（右上）
1.4、旋转rotate transform:rotate(45deg) //顺时针旋转45度
注意：使用transform方法变形时，是以元素的基准点进行的， 使用transform-origin属性可改变基准点，水平方向可取left
center right,垂直方向可取top center bottom
2、Transition
Transition:property duration timing-function,参数一指定对哪个参数进行平滑过渡，参数二指定多长时间内完成过度，参数三指定用什么方法进行过度
3、Animation
使用方法：
1、创建关键帧(注意:要兼容的话要加上前缀，如-webkit-等)
@keyframes 关键帧集合名{
0%{ 代码 }
50%{ 代码 }
100%{ 代码 }
}
2、在指定元素上使用关键帧
-webkit-animation-name: 关键帧名；
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
语法：
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
| animation-name | 规定需要绑定到选择器的 keyframe 名称。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数，infinite表示无穷次。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
| 值 | 描述 |
| normal | 默认值。动画应该正常播放。 |
| alternate | 动画应该轮流反向播放。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS动画学习</title> <link rel="stylesheet" type="text/css" href="animate.css"> </head> <body> <div class="test-transition"> transition </div> <div class="transform-animate"> <div class="test-transform_translate"> transform:translate(x,y) </div> <div class="test-transform_scale"> 测试transform:scale(x,y) </div> <div class="test-transform_skew"> 测试transform:skew(x,y) </div> <div class="test-transform_rotate"> 测试transform:rotate() </div> <div class="test-animate"> animation </div> <div class="sum"> <ul> <h2>总结：</h2> <li>transition:属性名 几秒内完成 用什么样的速度完成</li> <li>transform有四种变换，通常结合transition一起使用，即将transform看作transition的属性名</li> <li>实现变化的时机是给需要变化的box添加hover伪类，伪类样式里填写变化后的样式，原来box里填写变化前的样式</li> <li>animate的使用只需两步：<br>1创建关键帧，在每一帧里写需要变化的属性;<br>2 对要进行变化的box添加animation属性，该属性有六个值：帧名 几秒内完成 完成速度函数 延迟多久才执行 重复次数 是否需要反向执行动画(normal/alternate)</li> </ul> </div> </div> </body> </html>样式表文件：
.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: '微软雅黑';
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;
}
@keyframes changecolor{
0%{
background-color: blue;
}
50%{
background-color: red;
}
100%{
background-color: green;
}
}由于是动画效果，不好演示，就不上图了，可自行copy代码到浏览器看效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 