css动画总结
一、浏览器渲染过程
1.解析html构建dom树
2.解析css构建cssom
3.将dom树和cssom结合成渲染树
4.layout布局
5.paint绘制
6.composite合成
二、css动画之transition（过渡）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡简单测试</title>
<style>
div {
background-color: orange;
width: 100px;
height: 100px;
/* 谁动给谁加transition */
transition: all 3s;
}
/* 启动动画 */
div:hover {
/* 改变样式 */
background-color: red;
transform: translateX(200px) rotate(720deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、css动画之animation（动画）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>沿着轨迹运动的小球</title>
<style>
.road {
margin: 100px auto;
border: 1px solid red;
width: 200px;
height: 200px;
}
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
margin-left: -10px;
margin-top: -10px;
animation: 8s animate infinite;
}
@keyframes animate {
0% {
transform: translateX(0);
background-color: green;
}
25% {
transform: translate(200px, 0px);
background-color: red;
}
50% {
transform: translate(200px, 200px);
background-color: purple;
}
75% {
transform: translate(0px, 200px);
background-color: blue;
}
}
</style>
</head>
<body>
<div class="road">
<div class="ball"></div>
</div>
</body>
</html>
