1.背景介绍
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。
Animation字面上的意思，就是“动画”的意思，
我们使用CSS3的Animation制作动画，实现简单的幻灯片效果，可以省去复杂的js,jquery代码。Animation有一点不足之处，
我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，大家还是使用flash或js等。
2.知识剖析
animation: name duration timing-function delay
iteration-count direction fill-mode play-state;
对应：
animation:marginLeft 10s linear 2s infinite
100 reverse paused
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
/* W3C 和 Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
animation-delay: -2s /* W3C 和 Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */
animation-iteration-count: n|infinite;
n 定义动画播放次数的数值。
infinite 规定动画应该无限次播放。
animation-direction: normal|alternate;
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。
animation-play-state: paused|running;
paused 规定动画已暂停。
running 规定动画正在播放。
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
注释：其属性值是由逗号分隔的一个或多个填充模式关键词
animation-fill-mode : none | forwards | backwards | both;
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”。
下面我们就一起来看看这个“Keyframes”是什么东西。一个动画初始属性和最终属性，
一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，
如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作，
此时我们需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。
3.常见问题
@keyframes规则
兼容性该如何解决
4.解决方案
在CSS3中创建动画，您需要学习@keyframes规则。
Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，
后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，
有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，
如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，
我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，
比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，
我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，
也就是说这个"from"就相当于"0%"而"to"相当于"100%",值得一说的是，
其中"0%"不能像别的属性取值一样把百分比符号省略。
Internet Explorer 11、Firefox以及Opera支持@keyframes规则和animation属性。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .myDiv { 7 width:300px; 8 height: 300px; 9 margin: 20px auto; 10 -webkit-animation-name: 'loop'; 11 -webkit-animation-duration: 10s; 12 -webkit-animation-iteration-count: infinite; 13 } 14 /*在Firefox中，只需要用background-size则可以控制其随容器的大小而自动伸缩*/ 15 /*IE中另有设置，详见文章*/ 16 @-webkit-keyframes "loop"{ 17 0% { background: url("imgs/1.jpg") no-repeat;background-size: 100% 100%;} 18 25% { background: url("imgs/2.jpg") no-repeat;background-size: 100% 100%;} 19 50% { background: url("imgs/3.jpg") no-repeat;background-size: 100% 100%;} 20 75% { background: url("imgs/4.jpg") no-repeat;background-size: 100% 100%;} 21 100% {background: url("imgs/1.jpg") no-repeat;background-size: 100% 100%;} 22 } 23 </style> 24 </head> 25 <body> 26 <!-- 实现的效果：图片在div里不停的切换 --> 27 <div class="myDiv"></div> 28 </body> 29 </html>
也可以使用透明度实现：（li标签平铺方法（a）float（b）absolute+margin）
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>css3实现幻灯片效果（改变背景的透明度）</title> 5 <meta content="" name="description" /> 6 <meta content="" name="author" /> 7 <style type="text/css"> 8 .cb-slideshow{ 9 width:400px; 10 height:400px; 11 margin:0 auto; 12 z-index:0; 13 } 14 /*从 0.0 （完全透明）到 1.0（完全不透明） 默认值1.0*/ 15 /*所有的li都加了动画，但是每个li开始显示的时间不一样 见animation-delay*/ 16 /*position：absolute 所有的li重叠在一起*/ 17 /*使用margin-left可以使li标签不叠在一起 比如margin-left:-400px*/ 18 /*由于透明度的变化，后一张会覆盖前一张*/ 19 .cb-slideshow li{ 20 position:absolute; 21 width:400px; 22 height:400px; 23 background-size:cover; 24 background-repeat: none; 25 opacity:0; 26 z-index:0; 27 -webkit-animation: loops 36s linear infinite 0s; 28 } 29 /*第一个li元素，注意下标从1开始*/ 30 .cb-slideshow li:nth-child(1){ 31 background-image: url(imgs/1.jpg); 32 } 33 .cb-slideshow li:nth-child(2){ 34 background-image: url(imgs/2.jpg); 35 -webkit-animation-delay: 6s; 36 } 37 .cb-slideshow li:nth-child(3){ 38 background-image: url(imgs/3.jpg); 39 -webkit-animation-delay: 12s; 40 } 41 .cb-slideshow li:nth-child(4){ 42 background-image: url(imgs/4.jpg); 43 -webkit-animation-delay: 18s; 44 } 45 .cb-slideshow li:nth-child(5){ 46 background-image: url(imgs/1.jpg); 47 -webkit-animation-delay: 24s; 48 } 49 .cb-slideshow li:nth-child(6){ 50 background-image: url(imgs/2.jpg); 51 -webkit-animation-delay: 30s; 52 } 53 @-webkit-keyframes "loops" { 54 0% { 55 /*就是ele不显示*/ 56 opacity: 0; 57 58 } 59 8% { 60 /*ele显示出来*/ 61 opacity:1; 62 } 63 17% { 64 opacity:1; 65 } 66 25% { 67 opacity:0.5; 68 } 69 100% { 70 opacity: 0; 71 } 72 } 73 74 75 </style> 76 </head> 77 <body> 78 <ul class="cb-slideshow"> 79 <li></li> 80 <li></li> 81 <li></li> 82 <li></li> 83 <li></li> 84 <li></li> 85 </ul> 86 </body>
还有两种写法，利用了label和a的特性。不完全算是幻灯片，先贴上来看看.（未操作过）
1 <!doctype html> 2 <html> 3 <head> 4 <style> 5 img { 6 display: none; 7 width: 100px; 8 height: 100px; 9 } 10 11 input:checked + img { 12 display: block; 13 } 14 15 input { 16 position: absolute; 17 left: -9999px; 18 } 19 20 label { 21 cursor: pointer; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="cont"> 27 <input id="img1" name="img" type="radio" checked="checked"> 28 <img src="a.png"> 29 <input id="img2" name="img" type="radio"> 30 <img src="b.png"> 31 </div> 32 <div id="nav"> 33 <label for="img1">第一张</label> 34 <label for="img2">第二张</label> 35 </div> 36 </body> 37 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 6 #cont { 7 position: relative; 8 height: 100px; 9 } 10 img { 11 position: absolute; 12 width: 100px; 13 height: 100px; 14 z-index: 1; 15 } 16 img:first-child, 17 img:target { 18 z-index: 2; 19 } 20 21 22 </style> 23 </head> 24 <body> 25 <div id="cont"> 26 <img id="img1" src="a.jpg"> 27 <img id="img2" src="b.jpg"> 28 </div> 29 <div> 30 <a href="#img1">one</a> 31 <a href="#img2">two</a> 32 </div> 33 </body> 34 </html>
扫一扫
2814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
