一、定义动画
语法:@keyframes 动画名{from{};to{};}
- from是从某状态开始
- to是到某状态结束
- 也可以用百分比表示,把时间按百分比等分
二、引入动画
语法:animation:动画名称 动画执行时间 [延迟时间 动画曲线 执行次数 是否反向执行 是否保留最后一帧];
- []里的参数可有可无
- 执行次数为无限时,值为infinite
- 反向设置:值为alternate
在此引入一些小案例帮助理解
案例一
<!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>3d立方体</title>
<style>
/* 让父级动起来wrap */
@keyframes roll {
from {
transform: rotateX(0) rotateY(0) rotateZ(0)
}
to {
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg)
}
}
}
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
position: absolute;
}
.wrap {
/* 关键动画点 */
/* transform-origin: 300px 300px; */
margin: 100px;
animation: roll 4s linear infinite;
/* 开启3D */
transform-style: preserve-3d;
}
.wrap div {
line-height: 200px;
text-align: center;
font-size: 100px;
color: #fff;
}
/* 左手螺旋定责。大拇指冲正方形,顺着四指是顺时针 */
/* 左右 */
.wrap div:nth-of-type(1) {
/* 旋转时坐标系也会随着旋转 */
transform: rotateY(-90deg) translateZ(100px);
background-color: hotpink;
}
.wrap div:nth-of-type(2) {
/* 旋转时坐标系也会随着旋转 */
transform: rotateY(90deg) translateZ(100px);
background-color: deepskyblue;
}
/* 上下 */
.wrap div:nth-of-type(3) {
/* 旋转时坐标系也会随着旋转 */
transform: rotateX(90deg) translateZ(100px);
background-color: gold;
}
.wrap div:nth-of-type(4) {
/* 旋转时坐标系也会随着旋转 */
transform: rotateX(-90deg) translateZ(100px);
background-color: greenyellow;
}
/* 前后 */
.wrap div:nth-of-type(5) {
/* 旋转时坐标系也会随着旋转 */
transform: translateZ(100px);
background-color: tomato;
}
.wrap div:nth-of-type(6) {
/* 旋转时坐标系也会随着旋转 */
transform: rotateX(180deg) translateZ(100px);
background-color: orange;
}
</style>
</head>
<body>
<div class="wrap">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</body>
</html>
这是一个可以旋转的正立方体
案例二
<!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>case06</title>
<style>
@keyframes jump {
0% {
top: 80px;
transform: rotate(0deg);
}
12.5% {
top: 100px;
border-bottom-right-radius:50px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
25% {
top: 80px;
border-bottom-right-radius:10px ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
37.5% {
top: 100px;
border-bottom-right-radius:10px ;
border-top-right-radius: 50px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
50% {
top: 80px;
border-bottom-right-radius:10px ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
62.5% {
top: 100px;
border-bottom-right-radius:10px ;
border-top-right-radius: 10px;
border-top-left-radius: 50px;
border-bottom-left-radius: 10px;
}
75% {
top: 80px;
border-bottom-right-radius:10px ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
87.5% {
top: 100px;
border-bottom-right-radius:10px ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 50px;
}
100% {
top: 80px;
transform: rotate(360deg);
border-bottom-right-radius:10px ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
}
@keyframes scaleShadow{
from{transform: scaleX(1);}
to{ transform: scaleX(1.2);}
}
.bg {
width: 300px;
height: 300px;
background-color: skyblue;
position: relative;
}
.bg .jump {
width: 100px;
height: 100px;
background-color: #fff;
position: absolute;
left: 100px;
top: 80px;
border-radius: 10px;
animation: jump 2s linear infinite;
}
.shadow{
width: 80px;
height: 20px;
background-color: #666;
position: absolute;
left: 110px;
top: 190px;
border-radius: 50%;
animation: scaleShadow 0.25s linear infinite alternate;
}
</style>
</head>
<body>
<div class="bg">
<div class="shadow"></div>
<div class="jump"></div>
</div>
</body>
</html>
动画效果运行代码可见
注意
- 修改旋转点:transform-origin
- 开启3d:transform-style:preserve-3d;
- 旋转时,坐标系也会跟着旋转*