动画模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>60-动画模块</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
/*动画三要素1.告诉系统需要执行哪个动画*/
animation-name: abc;
/*动画三要素3.告诉系统动画需要持续的时间*/
animation-duration: 2s;
/*其它属性 告诉系统多少秒之后开始执行动画*/
animation-delay: 1s;
/*告诉系统动画执行的速度*/
animation-timing-function: linear;
/*告诉系统动画执行的次数（infinite无限循环）*/
animation-iteration-count: 99;
/*告诉系统是否需要执行往返动画*/
animation-direction: alternate;
/*动画模块连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
写前面两个属性就可以出现动画了
*/
/*animation: abc 2s linear 1s 99 alternate;*/
}
/*动画三要素2.告诉系统我们要创建一个名称叫abc的动画方式一*/
/*@keyframes abc {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}*/
@keyframes abc {
/*中间可以写无数个百分比*/
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;
}
}
.box1:hover{
/*
告诉系统当前动画是否需要暂停
取值：
running：执行动画
paused：暂停动画
*/
animation-play-state: paused;
}
.box2{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 200px auto;
animation-name: lng;
animation-duration: 5s;
/*
通过运行我们的动画发现，动画是有一定的状态的
1.等待状态
2.执行状态
3.结束状态
*/
/*
animation-fill-mode:的作用
指定动画等待状态和结束状态的样式
取值：
none：不做任何改变
forwards：让元素结束状态保持动画的最后一帧的状态
backwards：让元素等待状态的时候显示第一帧的样式
both：满足以上两种效果
*/
animation-fill-mode: both;
}
@keyframes lng {
0%{
transform: rotate(10deg);
}
50%{
transform: rotate(40deg);
}
100%{
transform: rotate(70deg);
}
}
</style>
</head>
<body>
<!--
1.过渡和动画之间的的异同
1.1不同点：
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
1.2相同点：
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>