定义动画
第一种方式
@keyframes 动画名称 {
0% {
/* 使用动画的节点在0%位置的动画。即刚开始的动画 */
}
100% {
/* 使用动画的节点在100%位置的动画。即结束动画 */
}
}
第二种方式
@keyframes 动画名称 {
from {
/* 开始动画 */
}
to {
/* 结束动画 */
}
}
使用动画
匹配使用动画的节点 {
/* 使用动画时，一定要有下面两个css属性 */
animation-name: /* 上面定义的动画名称 */;
animation-duration: /* 动画持续的时间，如5s */;
}
案例
案例中使用了第一种定义动画的方式。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3动画使用</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(100px, 0);
}
50% {
transform: translate(100px, 100px);
}
75% {
transform: translate(0, 100px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 使用动画时，一定要有下面两个css属性 */
animation-name: move;
animation-duration: 5s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>