一、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 语法

属性值

值	描述
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 语法

属性值

值	描述
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>

css3动画制作转动相册相关推荐

动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
CSS3动画制作的旋转风车，大家五一节日快乐
✅作者简介: 大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享一个CSS3动画制作的旋转风车!
利用CSS3动画制作摩天轮
本篇文章向大家介绍利用CSS3动画制作摩天轮旋转特效,代码很简单,还不赶紧学起来,发给你的小朋友看看吧! 运行效果: 代码: <!DOCTYPE html> <html>< ...
制作html相册需要什么环境,html5和CSS3怎么制作一个相册
html5和CSS3怎么制作一个相册发布时间:2021-01-25 10:23:25 来源:亿速云阅读:78 作者:小新这篇文章主要介绍了html5和CSS3怎么制作一个相册,具有一定借鉴价值, ...
使用CSS3动画制作导航菜单
使用CSS3动画制作导航菜单 1.使用定位属性把图片"赚"和"花"设置到相对应的位置上 2.使用animation属性给中间的"赚"和&qu ...
简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
利用CSS3动画制作“百度浏览器”官网奔跑的北极熊
现在各大浏览器的官网是越做越炫酷了.比如百度浏览器官网,虽然我不用这个浏览器呢(只用原版Chrome,不为其他,只因国内换壳的浏览器内核版本太低,跟Chrome官方始终有差距).但是不得不佩服百度的设 ...
html css动画自动旋转,HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）...
代码如下: HTML5-页面切换动画 #viewsWrapper { top:0px; left:0px; width:300px; height:200px; position:relative; ...
html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果
如上图,这种效果看着是不是挺"柔"的附代码文字一次渐变出现 body{ background-color: #333333; padding: 20px; -webkit-bo ...

css3动画制作转动相册

一、CSS3 动画

1.CSS3 @keyframes 规则

2.CSS3动画是什么？

3.CSS3 动画

4.CSS3的动画属性

5、animation属性

5.1animation-duration

5.2animation-timing-function

5.3animation-direction

定义和用法

CSS 语法

属性值

5.4animation-fill-mode

定义和用法

CSS 语法

属性值

实例

5.5animation-iteration-count

标签定义及使用说明

语法

5.6animation--play-state

标签定义及使用说明

语法

实例鼠标悬停动画进行，配合3D制作旋转相册：

css3动画制作转动相册相关推荐

最新文章

热门文章