@keyframes关键帧
动画就是从一个css样式变换到另一个css 样式,我们通过@keyframes来定义每一个状态,用百分比来规定改变发生的时间,也可以使用from{},to{}.
动画
animation-name | 动画属性名 |
animation-duration | 动画持续时间 |
animation-delay | 动画延迟时间 |
animation-timing-function | 动画速度曲线(ease慢快慢这是默认值,linear匀速) |
animation-iteration-count | 定义循环次数(infinite为无限循环) |
animation-direction:alternate | 动画轮流反向播放 |
animation-play-tate | 动画状态 |
animation-fill-mode:forwards | 保留最后一帧动画 |
案例 :实现3d旋转
<!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>case03</title>
<style>
@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;
background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F16c008be-7b7a-a3e4-1e4a-02cae01ebce7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653652026&t=c5e36431e7f35c016069b8e575dcbbcb);
background-size: 200px 200px;
background-repeat: no-repeat;
}
.wrap{
margin: 100px;
animation: roll 20s linear infinite;
transform-style: preserve-3d;
}
/* 左右 */
.wrap div:nth-of-type(1){
transform: rotateY(-90deg) translateZ(100px);
/* background-color: aquamarine; */
}
.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: yellow; */
}
/* 前后 */
.wrap div:nth-of-type(5){
transform: translateZ(100px);
/* background-color: purple; */
}
.wrap div:nth-of-type(6){
transform: rotateX(180deg) translateZ(100px);
/* background-color: green; */
}
</style>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>