物体下落的动画属性

广东信息科技职业培训学院

广信IT学院

技术文献总结装订册

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

年级：21级一班     姓名：张维裕        性别： 男     籍贯：广东茂名

毕业中学： 电白二中        入学时间：  2021年7月21日             

身份证号码：  440923200302264311            微信号：      

本技术文献起止时间： 2022年 3月 10日～ 2022年 3 月 19日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                                

文献目录

顺序	文献编号	文献类型	题目	开发工具	关键技术
01		专题技术	物体下落的动画属性	VS 2019	animation

备注：“文献编号”由学院工作人员填写；文献类型填写“专题技术”或“项目研发”

评  分

文献总分：        折算后标准分：       阅卷教师签名

序 号	题目	各项评分					文献 得分
		主题 深浅 （20）	文章 结构（10）	描述 清晰 （40）	图文 搭配 （20）	分享 评定（10）
01	数据库Models的引用说明
专题技术文献平均分： 文献数量加分：      篇x10分/篇=     分 专题技术文献总分：

广东信息科技职业培训学院编制

文献种类：专题技术总结文献

开发工具与关键技术： animation

作者：  张维裕     年级：  21级1班     撰写时间：  2022 年 3  月 10 日 

文献编号：                归档时间：   年   月   日

                物体下落的动画属性

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： animation

作者：张维裕

撰写时间：2022/3/10

一.动画属性 ：是对于过渡属性需要手动触发的缺点css3推出的解决方法，可自动运行。 动画是由每一个状态/帧加起来所构成的。

二.案例：物体自然垂直下落的过程

1．设置一些基本样式

宽.高.背景颜色.外边距

2.设置动画属性animation-name动画名字

animation-duration设置动画消耗时间

animation-timing-function设置动画效果快慢

animation-delay设置动画延时播放

animation-iteration-count设置动画运行次数 无数次:infinite

3.第一种方法设置每一个状态/帧

@keyframes关键帧+设置的名字{

from动画的开始{

动画效果，注意X水平/Y垂直轴

}

To结束{

动画效果

}

第二种方法

百分比从0开始至100%%依次设置状态，中间可穿插样式。

}

             

效果：物体做无限的垂直落体运动。

总结：第二种方法可分多次第一种只能有开始和结束中间，两种方法都可穿插样式。

动画属性比过渡属性更加灵活，注意第一和第二种方法的区别。

这是我所学到的Models引用步骤，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！