一、CSS3 动画
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
1.CSS3 @keyframes 规则
- 要创建 CSS3 动画，你需要了解 @keyframes 规则。
- @keyframes 规则是创建动画。
- @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
2.CSS3动画是什么？
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。
- 您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
- 0% 是动画的开始，100% 是动画的完成。
- 为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
3.CSS3 动画
- 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
- 注意: 必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
- 指定至少这两个CSS3的动画属性绑定向一个选择器：
- animation-name：规定动画的名称: 【注】动画名不要起关键字，最好见名知意 。
- animation-duration ：规定动画的时长
4.CSS3的动画属性
下面的表格列出了 @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 |
5、animation属性
5.1animation-duration
属性定义动画完成一个周期需要多少秒或毫秒。
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background: green;
position: relative;
animation: mymove infinite;
animation-duration: 2s;
}
@keyframes mymove {
from {
transform: translateX(0px);
}
to {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<p><strong>注意:</strong> animation-duration属性不兼容 Internet Explorer 9 以及更早版本的浏览器.</p>
<!-- 向右移动200px，2s完成 -->
<div></div>
<p><b>注意:</b> 要指定动画属性。否则时间若是0,动画不会进行。</p>
</body>
</html>5.2animation-timing-function
标签定义及使用说明
- animation-timing-function指定动画将如何完成一个周期。
- 速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
- 速度曲线用于使变化更为平滑。
语法
- animation-timing-function: value;
- animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
5.3animation-direction
定义和用法
animation-direction 属性定义是否循环交替反向播放动画。
注意：如果动画被设置为只播放一次，该属性将不起作用。
CSS 语法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| normal | 默认值。动画按正常播放。 |
| reverse | 动画反向播放。 |
| alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 |
| alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |
5.4animation-fill-mode
定义和用法
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
CSS 语法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |
| forwards | 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 |
| backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。 |
| both | 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 |
实例
把物体动画地从一个地方移动到另一个地方，并让它停留在那里：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>)</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-iteration-count: 2;
animation-fill-mode: forwards;
}
.box1 {
width: 100px;
height: 100px;
background: green;
}
@keyframes mymove {
from {
transform: translateX(0px);
}
to {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>
<div class="box">
</div>
<div class="box1">我是固定的</div>
</body>
</html>
5.5animation-iteration-count
标签定义及使用说明
animation-iteration-count属性定义动画应该播放多少次。
语法
animation-iteration-count: value;
| 值 | 描述 |
|---|---|
| n | 一个数字，定义应该播放多少次动画 |
| infinite | 指定动画应该播放无限次（永远） |
5.6animation--play-state
标签定义及使用说明
animation--play-state属性指定动画是否正在运行或已暂停。
语法
animation-play-state: paused|running;
| 值 | 描述 |
|---|---|
| paused | 指定暂停动画 |
| running | 指定正在运行的动画 |
实例鼠标悬停动画进行，配合3D制作旋转相册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
}
body {
background-image: radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);
}
.box {
width: 600px;
height: 340px;
position: absolute;
top: 50%;
margin-top: -170px;
left: 50%;
margin-left: -300px;
transform-style: preserve-3d;
transition: all 500s;
transform: rotateX(-5deg);
animation: turn 10s linear infinite paused;
}
.item {
position: absolute;
left: 0;
top: 0;
width: 600px;
height: 340px;
background-size: 600px;
}
/* 正面 */
.item:nth-child(1) {
background-image: url(./img/2.jpg);
transform: translateZ(600px);
}
/* 后面 */
.item:nth-child(2) {
background-image: url(./img/m1.jpg);
transform: translateZ(-600px);
}
/* 左后 */
.item:nth-child(3) {
background-image: url(./img/3.jpg);
transform: rotateY(60deg) translateZ(-600px);
}
/* 左前 */
.item:nth-child(4) {
background-image: url(./img/4.jpg);
transform: rotateY(-60deg) translateZ(600px);
}
/* 右前 */
.item:nth-child(5) {
background-image: url(./img/5.jpg);
transform: rotateY(60deg) translateZ(600px);
}
/* 右后 */
.item:nth-child(6) {
background-image: url(./img/6.jpg);
transform: rotateY(-60deg) translateZ(-600px);
}
/*
.box:hover {
transform: rotateX(-5deg) rotateY(36000deg);
} */
.box:hover {
animation-play-state: running;
}
@keyframes turn {
to {
transform: rotateX(-5deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<ul class="box">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</body>
</html>
7212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
