div{
width: 100px;
height: 50px;
background-color: red;
/*transition-property: margin-left;*/
/*transition-duration: 3s;*/
/*1.告诉系统需要执行哪个动画*/
animation-name: lnj;
/*3.告诉系统动画持续的时长*/
animation-duration: 3s;
}
/*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
@keyframes lnj {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
这是最基本的写法,需要自己定义动画名称,持续时间,以及动画效果。
.过渡和动画之间的异同 :
不同点 :过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以执行动画
相同点: 过渡和动画都是用来给元素添加动画的 过渡和动画都是系统新增的一些属性 过渡和动画都需要满足三要素才会有动画效果
下面是动画模块的其他属性:
div {
width: 100px;
height: 50px;
background-color: red;
animation-name: sport;
animation-duration: 2s;
/*告诉系统多少秒之后开始执行动画*/
/*animation-delay: 2s;*/
/*告诉系统动画执行的速度*/
animation-timing-function: linear;
/*告诉系统动画需要执行几次*/
animation-iteration-count: 3;
/*告诉系统是否需要执行往返动画
取值:
normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate, 往返动画, 执行完一次之后往回执行下一次
*/
animation-direction: alternate;
}
div:hover{
/*
告诉系统当前动画是否需要暂停
取值:
running: 执行动画
paused: 暂停动画
*/
animation-play-state: paused;
}
/*
通过百分比来实现动画
*/
@keyframes sport {
0%{
left: 0;
top: 0;
}
25%{
left: 300px;
top: 0;
}
50%{
left: 300px;
top: 300px;
}
75%{
left: 0;
top: 300px;
}
100%{
left: 0;
top: 0;
}
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
margin: 100px auto;
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;
}
动画无限执行:
ul{
width: 2000px;
height: 188px;
background-color: black;
animation: move 10s linear 0s infinite normal;/*连写格式*/
}
/*通过infinite*/