CSS3的动画需要遵循@keyframes规则
属性 | 描述 |
---|---|
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 |
animation-delay | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。(infinite:规定动画应该无限次播放。) |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。(alternate:动画应该轮流反向播放。) |
animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。(paused:规定动画已暂停。 ) |
animation-fill-mode | 规定对象动画时间之外的状态。 |
- animation-fill-mode
none:不改变默认行为。
forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both:向前和向后填充模式都被应用。 - 动画练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #fff;
border-radius: 50%;
float: left;
margin-left: 70px;
}
.a{
background: linear-gradient(to top,red,green);
position: relative;
animation-name:aa;
animation-duration:3s; /*完成一个周期时间*/
animation-timing-function: ease; /*动画运动曲线*/
animation-iteration-count: infinite; /*播放次数 无限次播放*/
animation-play-state: running; /*规定动画是否在运行*/
animation-fill-mode: none; /*规定动画时间之外的状态*/
animation-direction: normal; /*规定下一个周期是否逆向播放*/
}
@keyframes aa{
0%{
left: 0px;
top: 200px;
}
30%{
left:200px;
top: 1000px;
}
60%{
left:900px;
top: 0px;
}
100%{
left: 1200px;
top: 1200px;
}
}
.b{
background:blue;
position: relative;
animation:bb 3s ease infinite alternate;
}
@keyframes bb{
from{top:300px;left:600px;}
to{top: 300px;left: 600px;transform: scale(5,5) rotate(360deg);border-radius: 0px;background: linear-gradient(to top,white,orange);}
}
.c{
background:black;
position: relative;
animation:cc 3s ease infinite alternate;
}
@keyframes cc{
0%{
left: 0px;
top: 0px;
background: linear-gradient(to top,white,orange);
}
50%{
left:900px;
top: 0px;
transform: rotate(360deg);
background: linear-gradient(to top,pink,plum);
}
100%{
left: 1200px;
top: 1200px;
background: linear-gradient(to top,plum,salmon);
}
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
- perspective3D摄像机
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
注释:perspective 属性只影响 3D 转换元素。 transform-style 属性
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
flat:子元素将不保留其 3D 位置。
preserve-3d:子元素将保留其 3D 位置。练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>透视空间</title>
<style type="text/css">
.box{
margin:200px auto;
width:200px;
height:200px;
border:1px solid red;
perspective: 500px;
}
.a{
width:100%;
height:100%;
background:yellow;
transition:all 3s linear;
transform: translateZ(-200px);
}
.a:hover{
transform: translateZ(200px);
}
</style>
</head>
<body>
<div class="box">
<div class="a">鼠标移动</div>
</div>
</body>
</html>