HTML与CSS中的动画模块怎么用

这篇文章主要介绍了HTML与CSS中的动画模块怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML与CSS中的动画模块怎么用文章都会有所收获，下面我们一起来看看吧。

　　一.动画模块

　　1.过渡和动画之间的异同

　　1.1不同点

　　过渡必须人为的触发才会执行动画

　　动画不需要人为的触发就可以执行动画

　　1.2相同点

　　过渡和动画都是用来给元素添加动画的

　　过渡和动画都是系统新增的一些属性

　　过渡和动画都需要满足三要素才会有动画效果

　　2动画三要素

　　2.1告诉系统需要执行哪个动画

　　2.2告诉系统我们需要自己创建一个名称叫做lnj的动画

　　2.3告诉系统动画持续的时长

　　p{width:100px;

　　height:50px;

　　background-color:red;

　　/*1.告诉系统需要执行哪个动画*/

　　animation-name:lnj;

　　/*3.告诉系统动画持续的时长*/

　　animation-duration:3s;}

　　/*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/

　　@keyframeslnj{

　　from{margin-left:0;}

　　to{margin-left:500px;}

　　}

　　二.动画模块-其它属性(上)

　　p{

　　width:100px;

　　height:50px;

　　background-color:red;

　　animation-name:sport;

　　animation-duration:2s;

　　/*告诉系统多少秒之后开始执行动画*/

　　/*animation-delay:2s;*/

　　/*告诉系统动画执行的速度*/

　　animation-timing-function:linear;

　　/*告诉系统动画需要执行几次*/

　　animation-iteration-count:3;

　　//infinite:无限的

　　/*告诉系统是否需要执行往返动画

　　取值:normal,默认的取值,执行完一次之后回到起点继续执行下一次

　　alternate,往返动画,执行完一次之后往回执行下一次

　　*/animation-direction:alternate;}

　　@keyframessport{

　　from{margin-left:0;}

　　to{margin-left:500px;}}

　　p:hover{

　　/*告诉系统当前动画是否需要暂停

　　取值:running:执行动画,默认取值

　　paused:暂停动画,当动画执行时,鼠标hover到p上方时,动画停止,鼠标移开,则继续动画;

　　*/

　　animation-play-state:paused;}

　　三.动画模块-其它属性(下)

　　.box2{

　　width:200px;

　　height:200px;

　　background-color:blue;

　　margin:100pxauto;

　　animation-name:myRotate;

　　animation-duration:5s;

　　animation-delay:2s;

　　/*通过我们的观察,动画是有一定的状态的

　　1.等待状态2.执行状态3.结束状态*/

　　/*animation-fill-mode作用:指定动画等待状态和结束状态的样式

　　取值:none:不做任何改变

　　forwards:让元素结束状态保持动画最后一帧的样式;

　　//向前的

　　backwards:让元素等待状态的时候显示动画第一帧的样式;

　　//向后的

　　both:让元素等待状态显示动画第一帧的样式,让元素结束状态保持动画最后一帧的样式

　　*/

　　/*animation-fill-mode:backwards;*/

　　/*animation-fill-mode:forwards;*/

　　animation-fill-mode:both;}

　　@keyframesmyRotate{

　　0%{transform:rotate(10deg);}

　　50%{transform:rotate(50deg);}

　　100%{transform:rotate(70deg);}

　　}

　　animation-fill-mode

　　四.动画模块-连写

　　1.动画模块连写格式

　　animation:动画名称动画时长动画运动速度延迟时间执行次数往返动画;

　　2.动画模块连写格式的简写

　　animation:动画名称动画时长;

　　五.云层效果

　　六.无限滚动

　　

• 
• 

　　

• 
• 

　　//把前两个li加在后面,起到过度效果;动画不会显得太生硬.

　　

• 
• 

　　

关于“HTML与CSS中的动画模块怎么用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML与CSS中的动画模块怎么用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程笔记行业资讯频道。