Animation（动画）
思维导图
区分关键帧周期以及动画周期、动画内属性以及动画外属性
代码例子
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=deice-width, initial-scale=1.0">
<title>animation</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 400px;
height: 400px;
background: wheat;
border: 1px solid black;
}
.inner {
margin: 0 auto;
width: 100px;
height: 100px;
background: ghostwhite;
border-radius: 50%;
text-align: center;
line-height: 100px;
/* 关键帧的名字 */
animation-name: move;
/* 一个动画周期的时长 */
animation-duration: 3s;
animation-timing-function: ease-in;
/* 反方向运动 */
animation-direction: reverse;
/* 延迟两秒 */
animation-delay: 2s;
/* 重复两次 */
animation-iteration-count: 2;
/* 元素在动画外的状态 */
animation-fill-mode: both;
}
@keyframes move {
from {
transform: translateY(0px);
}
to {
transform: translateY(300px);
}
}
/* 鼠标滑过停止运动 */
#wrap:hover .inner {
animation-play-state: paused;
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">ball</div>
</div>
</body>
</html>
2D与3D变形
