css3animation间隔(css3 animation属性)

CSS3动画怎么实现每个一段时间播放一次

可以。前提你得设置2次以上，比如

第一种：animation：4s 10 5s

4s本次运动时间，10是动画10次 5s是等5秒开始动画

第二种：animation-delay：5s 延迟后运行

第三种：需要animation-name: xxoo（xxoo是说本次你做的动画叫什么，纯属自己定义！不要以为这是h5标签XXOO）

@keyfrarmes?xxoo

{?

??0%{}

??10%{}

??30%{?你做的动画已经完成?}

??100%{剩下的跟100%一模一样，就相当于等了几秒}

}

css3循环动画在第一次执行的时候可以设置多少秒之后开始执行，但到了下一次开始执行的间隔时间怎么设置？

把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了，具体的democan参见demo。

循环动画由几幅画面构成，要根据动作的循环规律确定。但是，只有三张以上的画面才能产生循环变化效果，两幅画面只能起到晃动的效果。

在循环动画中有一种特殊情况，就是反向循环。比如鞠躬的过程，可以只制作弯腰动作的画面，因为用相反的循序播放这些画面就是抬起的动作。掌握循环动画制作方法，可以减轻工作量，大大提高工作效率。因此在动画制作中，要养成使用循环动画的习惯。

物体的变化，可以分解为连续重复而有规律的变化。因此在动画制作中，可以尽制作几幅画面，然后像走马灯一样重复循环使用，长时间播放，这就是循环动画。

动画中的常用方法：

动画中常用的虚线运动、下雨、下雪、水流、火焰、烟、气流、风、电流、声波、人行走、动物奔跑，鸟飞翔，轮子的转动，机械运动以及有规律的曲线运动、圆周运动等等，都可以采用循环动画。

但事情总是一分为二的，循环动画的不足之处就是动作比较死板，缺少变化。为此，长时间的循环动画，应该进一步采用多套循环动画的方式进行处理。

CSS3 animation动画，循环间的延时执行该怎么弄

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

延迟和循环只需设置delay和animation-iteration-count，可以简写在animation属性里面，也可以单独使用animation-delay和animation-iteration-count设置

例如

div

{

animation:mymove?5s?infinite;

-webkit-animation:mymove?5s?infinite;?/*?Safari?和?Chrome?*/

}

CSS3 新增的特性

border-radios 添加圆角边框

border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影））

border-image：设置边框图像

border-image-source 边框图片的路径

border-image-slice 图片边框向内偏移

border-image-width 图片边框的宽度

border-image-outset 边框图像区域超出边框的量

border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满stretch 拉伸）

Background-size 背景图片尺寸

Background-origin规定background-position属性相对于什么位置定位

Background-clip 规定背景的绘制区域（padding-box，border-box，content-box）

Linear-gradient（）线性渐变

Radial-gradient（）径向渐变

Word-break：定义如何换行

Word-wrap：允许长的内容可以自动换行

Text-overflow：指定当文本溢出包含它的元素，应该干啥

Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）

Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜

Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）

Transform-style 指定嵌套元素怎么样在三位空间中呈现

rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）

定义缩放转换

Perspective（n）为 3D 转换 translate rotate scale

Transition-proprety 过渡属性名

Transition-duration 完成过渡效果需要花费的时间

Transition-timing-function 指定切换效果的速度

Transition-delay 指定什么时候开始切换效果

Animation-name 为@keyframes 动画名称

animation-duration 动画需要花费的时间

animation-timing-function 动画如何完成一个周期

animation-delay 动画启动前的延迟间隔

animation-iteration-count 动画播放次数

animation-direction 是否轮流反向播放动

CSS3帧动画

animation动画除了可以实现补间动画外，还可以完成逐帧动画。

在animation的属性中，有个属性 animation-timing-function 一共具有如下这些值

CSS

贝塞尔缓动就是完成补间动画的，比如流畅的缩放、位置移动等动画。

但是逐帧动画没有补间效果的，它不是电脑根据初始和结束状态的差异自动生成中间的过渡帧，而是每一帧都是关键帧，需要自己定义每一帧的状态。

比如像下面这样的图，就只能通过逐帧动画来实现运动效果↓

这几个属性值就是用来处理逐帧动画的：

CSS

steps(number,position) ，有两个参数。

number表示动画的段数。关键帧的数量=段数+1。

position这个比较难理解，有两个值：end和start。end是默认值。

先看一个效果。

两个小球，从0px运动到400px，分为了4个动画步骤，有5个关键帧。第一个是start模式，第二个是end模式。

发现start模式是时间一开始，直接进入第二个关键帧状态，然后顺利顺利走完全程。

end模式有点傻，时间一开始，从第一个关键帧开始跑，结果时间结束了，才走完第四个关键帧，没有完成全部路程就over了。

所以start和end的名字和它所表示的含义刚好相反。

比如执行次数或者填充模式。

为上面的小球加上infinite，可以看出start模式第二次开始的运动都是从第二个关键帧开始的。

加上forwards模式则变得不一样了，forwards是向前的单词意思，但是表示的则是保留动画最后的运动状态，意思和功能也是相反的。

第二个end模式的小球终于有机会走完全程了。

所以，当为end模式设置了forwards的时候要小心，因为它其实多走了一步。

1、这头熊的原始素材一共有8个步骤。

所以使用 steps(8,end) 是最好的方式，因为如果使用 steps(8,start) ，则第一帧不能执行，最后一帧会闪白，图片消失。

因为要一直运动，所以需要加上infinite，当执行完最后一张图的时候，再返回到第一张图，形成一个连贯的完步。

通过背景图片的 background-position 的改变，形成熊的运动。

CSS

可以打开codepen编辑器，把运动时间设置更大一点，可以看到慢动作，一帧一帧是如何显示的。

2、这个logo一共有24张图片

但是logo只运动一次，并且停在结束状态，根据end模式的特征，如果加上forwards的话，会多运动一步。

所以，这里是 steps(23,end) ，为什么是23步，而不是24步，因为forwards模式对它的影响。要想最后一步还要看到图片，那么背景图片的挪动就要少挪动一个图片的宽度。图片整个宽度4800px，每一张图200px的宽高。所以背景图片只需要往左边挪动-4600px即可。

CSS

通过上面的案例可以看出，对象的运动效果由逐帧绘制的图片的间距所影响。间距一样，则速度一样。利用steps不能去改变现成的图片帧与帧之间的速度。

但是利用 step-end 或者 step-start 却是可以的。

3、 step-end 的特别用处

其实 step-end 等价于 steps(1,end) ， step-start 等价于 steps(1,start) 。

只有一个步骤的逐帧动画，却可以利用好时间的改变和距离的改变做出速度不同的效果来。

熊从左边快速奔跑出来，一共跑了六步，一步比一步速度放慢。然后在原地踏步。

首先这是一个逐帧动画，但是要实现不同的速度，又没有办法改变原来素材图片与图片之间的距离，所以要使用另外的办法。

第一个完步时间间隔小，left的值间隔大，相当于速度快。背景图片往左移动一张，left的值往右改变一次，熊实现往前奔跑。

CSS

第二个完步的时间间隔稍微大点，left的间隔小了一点，速度变慢了一些。依次类推，速度逐渐放缓。第二个完步又从第一帧开始。

CSS

所以说利用step-end还是可以做出速度不一样的逐帧动画的。

在线制作雪碧图：

CSS3的animation

animation: 属性是一个简写属性，用于设置六个动画属性：

animation: name duration timing-function delay iteration-count direction;

对应上面的属性意思： 动画名称 动画执行时间 动画速度曲线 延迟时间 执行次数 执行方向

nternet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

animation-name: keyframename|none;动画名称

keyframename 自定义的名字

none 无动画效果

animation-duration: time;动画执行时间

time 秒或毫秒

animation-delay:time;动画效果延迟时间

time 秒或毫秒

animation-timing-function: value; 动画速度曲线

linear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease:规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in:规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out:规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out :规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

animation-iteration-count: n|infinite;动画执行次数

n 具体的次数

infinite 无限重复

animation-direction: normal|alternate;动画执行方向

normal 正常顺序(默认值)

alternate 动画轮流反向播放

animation-play-state: paused|running;动画执行状态

paused 暂停动画

running 运行动画

animation-fill-mode : none | forwards | backwards | both;动画执行过程效果是否可见

none 不改变(默认值)

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

both 向前和向后填充模式都被应用