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:动画名称动画时长;
五.云层效果