关于css动画animation以及图片轮播不是很清晰，就查了一下资料
现在自己再整理一下思路
1，整体思路：两个div:一个div（.wrap),一个div（.inner）；
其中：.wrap包裹.inner ，它的宽度和单张照片等宽，如width：100px;并设置overflow：hidden
其中：.inner里边放图片img，inner的宽度是所有图片排列一排的总宽度
其中：(三张图片) 给img设置一个宽度，eg：width：100px; float：left；
2，动画：设置每次偏移一张图片的宽度，即显示出一张图片
3，动画分解：让图片切换后静置一下，看起来更自然一点，可将动画细分为切换和静置两个阶段。
<div class="wrap">
<div class="inner">
<img src="img/01.jpg">
<img src="img/02.jpg">
<img src="img/03.jpg">
</div>
</div>
/* 图片轮播 */
img{
width: 100px;
height: 100px;
float: left;
}
.wrap{
position: absolute;
width: 100px;
height: 100px;
background: palegoldenrod;
overflow: hidden;
}
.inner{
position: absolute;
z-index: 9;
width: 300px;
height: 100px;
background: pink;
/*width: calc(100px * 3);/!*---修改图片数量的话需要修改下面的动画参数*!/*/
animation: anim 10s infinite alternate;
}
@keyframes anim {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
0%,20%{ margin-left: 0px;}
25% ,40%{margin-left: -100px;}
45%, 60%{margin-left: -200px;}
65%, 90%{margin-left: -100px;}
95%, 100%{margin-left: 0px;}
}
======= 分割线 =======
说到animation，必须知道keyframe--"关键帧"，用来规定时间段内，动画执行什么动作。
（2）keyframes语法：@keyframes animationname {keyframes-selector {css-styles;}}
》》》 animationname，必须的 定义animation的名称
》》》 keyframes-selector，必须的，动画持续时间的百分比
》》》 css-styles， 必须的，一个或多个合法的css样式
【"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。】
【比较：
animation、transform、transition
很多的资料会把 transform 和 transition 同时直接归类为动画，的确，从很多实际使用的例子中看，transform 和 transition 都表现出动画的特征，但实际上，它们仍有很大的区别：
transform 和 transition 需要经过用户触发才会表现出动态的效果，这些触发条件可以是:link、:visited、:hover、:active 和 :focus 五个 CSS 伪类，也可以是 click、focus 等 JavaScirpt 事件，如果没有设置触发条件而直接给元素设置 transform 或 transition ，用户只能看到元素的终态而没有动画过程。animation 则无须触发条件，开发者只需为元素绑定动画即可。
另外，在旧版本的 animation 中，animation 、transform 以及 transition 都有一个重要的性质——过程执行完毕后会回撤，例如以 :hover 触发 transform ，在鼠标离开元素后动画自动反向播放，使到元素回到 transform 之前的状态，animation 也会在动画结束后回滚，但不会反向播放动画，而是直接跳到动画播放之前的动态。
但是，经过修订，animation 增加了一个很重要的属性 animation-fill-mode ，这个属性控制设置动画之外的状态，即元素在动画开始前后的状态是否根据动画设置中“0%”、“100%”的状态设置，animation-fill-mode 的值可以为 none、forwards、backwards 或 both ，默认为 none ，即动画过程中“0%”、“100%”的状态不会设置为元素开始和结束的状态，backwards 和 forwards 则分别设置开始和结束的状态，both 则同时设置两个的状态，例如上面平移元素的例子，若加入 forwards 属性，则在动画结束后元素会保留在 100% 时动画设置的位置而不回撤。
有了这个属性，animation 动画也就更加完整了，虽然没有了这个属性，开发者仍可以设置出自己需要的效果，但是 animation 是需要配合其他 CSS 属性设置才会有最终的效果，若没有了这个属性设置动画将会复杂很多。】
（3）animation的7个属性：
animation属性一个速记法，
另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。
animation:[<span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-name</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-duration</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-timing-function</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-delay</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-iteration-count</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-direction</span>></span>] [, [<span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-name</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-duration</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-timing-function</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-delay</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-iteration-count</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-direction</span>></span>] ]* </span>
1）animation-name;
animation-name: none | IDENT[,none | IDENT]*;
用来定义一个动画的名称，其主要有两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。
2）animation-duration;
animation-duration: <span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">time</span>></span>[,<span class="tag"><<span class="title" style="color:rgb(38,139,210);">time</span>></span>]*</span>
3）animation-timing-function;
animation-timing-<span class="keyword" style="color:rgb(133,153,0);">function</span>:ease | linear | ease-<span class="keyword" style="color:rgb(133,153,0);">in</span> | ease-out | ease-<span class="keyword" style="color:rgb(133,153,0);">in</span>-out | cubic-bezier(<span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>)]* </span>
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。
动画的过渡类型，参数可选值类似于 transition-timing-function ，默认为 ease ，具体如下：
linear：线性过渡。相当于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。相当于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。相当于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。相当于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。相当于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，number 在 [0, 1] 区间内取值
4）animation-delay;
animation-delay: <span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">time</span>></span>[,<span class="tag"><<span class="title" style="color:rgb(38,139,210);">time</span>></span>]*</span>
animation-delay:是用来指定元素动画开始时间。取值为<time>为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delayy使用方法是一样的。
5）animation-iteration-count;
animation-iteration-count:infinite | <span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span> [, infinite | <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>]* </span>
6）animation-direction;
animation-direction: normal | alternate [, normal | alternate]*
animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
7）animation-play-state
animation-play-state:running | paused [, running | paused]*
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持。
网友评论