广东信息科技职业培训学院
广信IT学院
技术文献总结装订册
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~文献目录
顺序 文献编号 文献类型 题目 开发工具 关键技术
01 专题技术文献 动画过渡 transition DW CSS
02 专题技术文献 Keyframes & animation DW CSS
备注：“文献编号”由学院工作人员填写；文献类型填写“专题技术”或“项目研发”
广东信息科技职业培训学院编制
评 分
文献总分： 折算后标准分： 阅卷教师签名
（有效）专题技术文献评分
序号 题目 各项评分 文献得分
主题深浅（20） 描述清晰（40） 图文搭配（20） 分享评定（20）
01 动画过渡 transition
02 Keyframes & animation
专题技术文献平均分： 文献数量加分： 篇x10分/篇= 分专题技术文献总分：
项目研发文献评分
序号 题目 各项评分 文献得分
业务模块数量（20） 模块复杂度（30） 图文描述（30） 分享评定（20）
01
02
项目研发文献平均分： 文献数量加分： 篇x10分/篇= 分项目研发文献总分：
备注：
1、分享评定：发表到指定的3个网站，成功1个加5分，成功2个加10分，成功3个加20分。
2、实际总分=专题技术文献平均分+项目研发文献平均分*3。
3、所有文献必须提交对应的程序源码和项目演示视频，按照表格题目命名，放在同一个文件夹。
4、文献和源码、视频等文件，统一放到一个文件夹里面并提交给班长，文件夹命名格式如：
“广信IT17-1张悦190119文献与源文件”。
动画过渡 transition
Transition是一个复合属性，包含一下几个子属性：
Transition-property:指定过渡或动态模拟的CSS属性：
Transition-duration:指定过渡完成所需的时间；
Transition-timing-function:指定过渡函数；
Transition-delay:指定开始出现的延迟时间；
transition-property
具有过渡动画的CSS属性有：
注意：当transition-property的属性值为all时，表示的是所有初始状态设置了
样式的属性；
transition-duration
该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间；
transition-timing-funtion
即“缓冲函数”，指过渡效果的时间曲线，包括以下几种：
transition-delay
设置一个动画开始执行的是时间：
Transition:transition-propertytransition-duration transition-timing-function transition-delay;
Keyframes &animation
keyframes(关键帧)
计算机动画术语，帧—就是动画中最小单位的单幅影像画面，相当于电影胶片
上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。
关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡或者中间帧。其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
关键帧的创建：
0%和100%之间可以创建多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式；
0%和100%可以使用关键词from和to来表示。
2、animation动画
Animation为复合样式，包含以下子属性：
animation:animation-name;(调用动画)
animation-duration(动画播放时间)
animation-timing-function(动画播放方式)，同tranition动画过渡；
animation-delay(动画开始播放时间)
animation-iteratin-count(动画播放次数)
两个值：
Infinite(无限)；n(具体次数)
animation-direction(动画播放方向)
两个值：
Normal 每次循环都是向前播放；
Alternate 奇数次向前播放，偶数次反方向播放；
animation-play-state(动画播放状态)
两个值：running & paused
Running类似于音乐播放器，paused是将播放的动画停下来；
Running将暂停的动画重新播放，是从暂停位置开始播放，另外如果暂停了动画的播放，元素的样式将回到最原始设置的状态。
animation-fill-made (动画时间外属性)
四个值：
None:默认，动画按预期进行，在动画完成最后一帧时，会反转到初始帧；
Forwards:动画结束后应用最后的关键帧；
Backwards:元素应用动画样式是迅速应用动画的初始帧，主要体现在动画开始之前；
Both:同时具有forwards和backwards的效果，即开始前会应用初始帧，结束后会继续应用最后的关键帧；
@keyframeschangecolor{
0%{
background: red;
}
50%{
background: red;
}
100%{
background: green;
}
}
在一个“@keyframes”中的样式规则可以由多个百分比构成的，
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有
动画效果的元素加上不同的样式，
从而达到一种在不断变化的效果。
广信IT学院
技术文献总结装订册
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~文献目录
顺序 文献编号 文献类型 题目 开发工具 关键技术
01 专题技术文献 动画过渡 transition DW CSS
02 专题技术文献 Keyframes & animation DW CSS
备注：“文献编号”由学院工作人员填写；文献类型填写“专题技术”或“项目研发”
广东信息科技职业培训学院编制
评 分
文献总分： 折算后标准分： 阅卷教师签名
（有效）专题技术文献评分
序号 题目 各项评分 文献得分
主题深浅（20） 描述清晰（40） 图文搭配（20） 分享评定（20）
01 动画过渡 transition
02 Keyframes & animation
专题技术文献平均分： 文献数量加分： 篇x10分/篇= 分专题技术文献总分：
项目研发文献评分
序号 题目 各项评分 文献得分
业务模块数量（20） 模块复杂度（30） 图文描述（30） 分享评定（20）
01
02
项目研发文献平均分： 文献数量加分： 篇x10分/篇= 分项目研发文献总分：
备注：
1、分享评定：发表到指定的3个网站，成功1个加5分，成功2个加10分，成功3个加20分。
2、实际总分=专题技术文献平均分+项目研发文献平均分*3。
3、所有文献必须提交对应的程序源码和项目演示视频，按照表格题目命名，放在同一个文件夹。
4、文献和源码、视频等文件，统一放到一个文件夹里面并提交给班长，文件夹命名格式如：
“广信IT17-1张悦190119文献与源文件”。
动画过渡 transition
Transition是一个复合属性，包含一下几个子属性：
Transition-property:指定过渡或动态模拟的CSS属性：
Transition-duration:指定过渡完成所需的时间；
Transition-timing-function:指定过渡函数；
Transition-delay:指定开始出现的延迟时间；
transition-property
具有过渡动画的CSS属性有：
注意：当transition-property的属性值为all时，表示的是所有初始状态设置了
样式的属性；
transition-duration
该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间；
transition-timing-funtion
即“缓冲函数”，指过渡效果的时间曲线，包括以下几种：
transition-delay
设置一个动画开始执行的是时间：
Transition:transition-propertytransition-duration transition-timing-function transition-delay;
Keyframes &animation
keyframes(关键帧)
计算机动画术语，帧—就是动画中最小单位的单幅影像画面，相当于电影胶片
上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。
关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡或者中间帧。其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
关键帧的创建：
0%和100%之间可以创建多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式；
0%和100%可以使用关键词from和to来表示。
2、animation动画
Animation为复合样式，包含以下子属性：
animation:animation-name;(调用动画)
animation-duration(动画播放时间)
animation-timing-function(动画播放方式)，同tranition动画过渡；
animation-delay(动画开始播放时间)
animation-iteratin-count(动画播放次数)
两个值：
Infinite(无限)；n(具体次数)
animation-direction(动画播放方向)
两个值：
Normal 每次循环都是向前播放；
Alternate 奇数次向前播放，偶数次反方向播放；
animation-play-state(动画播放状态)
两个值：running & paused
Running类似于音乐播放器，paused是将播放的动画停下来；
Running将暂停的动画重新播放，是从暂停位置开始播放，另外如果暂停了动画的播放，元素的样式将回到最原始设置的状态。
animation-fill-made (动画时间外属性)
四个值：
None:默认，动画按预期进行，在动画完成最后一帧时，会反转到初始帧；
Forwards:动画结束后应用最后的关键帧；
Backwards:元素应用动画样式是迅速应用动画的初始帧，主要体现在动画开始之前；
Both:同时具有forwards和backwards的效果，即开始前会应用初始帧，结束后会继续应用最后的关键帧；
@keyframeschangecolor{
0%{
background: red;
}
50%{
background: red;
}
100%{
background: green;
}
}
在一个“@keyframes”中的样式规则可以由多个百分比构成的，
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有
动画效果的元素加上不同的样式，
从而达到一种在不断变化的效果。
