CSS3 动画
2021-07-02 本文已影响0人
微语博客
动画属性
动画（animation）是CSS3新增的属性，动画属性可以为元素创建动画，CSS3以前在网页上实现动画效果，基本上依赖flash和javascript的。
动画相关属性：
- animation：复合属性，设置动画的名称和时间等
- @keyframes：设置动画的关键帧
关键帧（@keyframes）
@keyframes 规则是创建动画，@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{width: 200px;height: 100px;border: 1px solid black; background-color: lime;}
@keyframes myAnim{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
@keyframes myAnim2{
from{background-color: lime;}
to{background-color: orangered;}
}
</style>
</head>
<body>
<div style="animation: myAnim 5s;">CSS3动画 rotate(360deg) 5s</div>
<div style="animation: myAnim2 5s;">CSS3动画 background-color orangered 3s</div>
</body>
</html>
以上两个简单的动画使用from{}to{}创建关键帧，还可以使用百分比创建
百分比创建关键帧
关键词 "from" 和 "to"，等同于 0% 和 100%，用百分比来规定变化发生的时间，更有利于对动画的效果和细节进行控制。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{width: 200px;height: 200px;border: 1px solid black; background-color: lime;}
@keyframes myAnim3{
0% {background-color: lime;}
25% {background-color: lightsalmon;}
50% {background-color: aqua;}
75% {background-color: magenta;}
100% {background-color: lime;}
}
</style>
</head>
<body>
<div style="animation: myAnim3 5s infinite;">CSS3动画 背景颜色幻灯片 5s</div>
</body>
</html>
infinite表示动画无限次数的循环
动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画帧。 | 3 |
| animation | 所有动画属性的简写属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
