css3制作网页动画

一.CSS3变形

CSS3变形是一些效果的集合
如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

二.CSS3位移:translate

<style type="text/css">

li a:hover{
transform: translate(10px,10px);
transform: translateX(10px);
transform: translateY(10px);
}

</style>

三.CSS3的缩放scale

transform: scale(缩放倍数);

<style type="text/css">
li a:hover{
transform: scale(0.5);
}
</style>
四.CSS3的倾斜skew
transform: skew(-10deg,-30deg);
<style type="text/css">
li a:hover{
transform: skew(-10deg,-30deg);
}
</style>
五.CSS3的旋转rotate
transform: rotate(361deg);
<style type="text/css">
img:hover{
transform: rotate(361deg);
}
</style>
※当想使用多个函数的话那么每个函数中间用空格分割

六.CSS的过度

transition: 过度属性 过度完成时间 过渡动画函数 过度延迟时间;
1.过渡属性（ transition-property ）

定义转换动画的CSS属性名称
IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
2.过渡所需的时间（ transition-duration ）
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
3.过渡动画函数（ transition-timing-function ）
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
4.过渡延迟时间（ transition-delay ）
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行

<style type="text/css">
li img{
transition: all 0.1s ease-in 1s;
}
li img:hover{
transform: rotate(360deg) scale(1.5);
}

</style>

七.CSS的动画

1./*声明关键帧*/
@keyframes S1303 {
0%{
10px;
transform: translate(100px,0);
}
20%{
20px;
transform: translate(200px,0);
}
40%{
30px;
transform: translate(300px,0);
}
60%{
40px;
transform: translate(400px,0);
}
80%{
50px;
transform: translate(500px,0);
}
100%{
60px;
transform: translate(600px,0);
}
}
2.调用关键帧
animation: 关键帧名称 过度时间 播放速度 播放次数;
animation: S1303 2s linear infinite;

作业：
1.第九章上机练习和简答
2.第九章博客
3.日记
4.第九章笔记
5.HTML复习内容准备：

5.1 初始HTML 张星辰
5.2 列表表格与媒体元素 任自彬
5.3 表单 史智慧
5.4 初始CSS 王叶鹏
5.5 css美化网页元素 陈璟瑜
5.6 盒子模型 赵贺贺
5.7 浮动 支佳宁
5.8 定位网页元素 蔡怀鑫
5.9 css3制作网页动画 佟超飞
5.10 准备1-9章所有课后简答题以及选择题 祝愿
5.11 1-9章总结 杨金川（从第一张开始到第九章结束，所有技能点要说一遍还有重要代码上机）

准备PPT，谢谢大家，不用客气，我很仁慈的...