如何使用JavaScript控制CSS Animations和Transitions

控制CSS Animation(动画)

就像我们刚刚了解到的，我们可以看到与元素动画相关的事件：animationStart,animationIteration,animationEnd。但是如果我们想改变CSS animation(动画)执行过程中的动画，还需要一点技巧！

animation-play-state属性

当你想在动画执行过程中暂停，并且接下来让动画接着执行。这时CSS的animation-play-state属性是非常有用的。你可以可以通过JavaScript像这样更改CSS(注意你的前缀)：

elementstylewebkitAnimationPlayState = "paused";

elementstylewebkitAnimationPlayState = "running";

然而当使用animation-play-state让CSS 动画暂停时，动画中的元素变形也会以相同的方式被阻止。你不能使这种变形暂停在某个状态，使它变形，使它恢复，更不用期望它能从新的变形状态中恢复到流畅运行。为了实现这些控制，我们需要做一些更复杂的工作。

获取当前keyvalue的百分比

不幸的是，在这个阶段没有办法获得当前CSS动画关键帧的“完成百分比”。最好的获取近似值的方法是使用setInterval 函数在动画过程中迭代100次。它的本质是：动画持续的时间(单位是毫秒)/100。例如，如果动画时长4秒，则得到的setInterval的执行时间是每40ms(4000 / 100)。

var showPercent = windowsetInterval(function() {

if (currentPercent < 100) {

currentPercent += 1;

} else {

currentPercent = 0;

}

// Updates a div that displays the current percent

resultinnerHTML = currentPercent;

}, 40);

这种做法很不理想，因为函数实际运行频率要远少于每40ms。我发现将它设为39ms更准确。但这个也不是好实现，因为它依赖于浏览器，并非所有浏览器下都能得到很完美效果。

获取当前动画的CSS属性值

在理想的情况下，我们选择一个使用CSS动画的元素，删除该元素当前动画再给它添加个新的动画，让它可以从当前状态开始新的动画。但是现实情况却很复杂。

下面我们就有一个演示，用来测试获取和改变CSS动画”中间流”的技术。该动画让一个元素沿一个圆形路径移动，起始位置在圆形的顶部中心(或称为“十二点”)位置。当按钮被单击时，元素的起始位置变成元素当前移动到的位置。元素会沿着之前相同的路径继续移动，只是现在“起始”的位置变成了你按下按钮时元素移动到的位置。通过在动画的第一关键帧把元素的颜色变成红色，来表示元素动画起始点位置发生了改变。

>

引导层,例子说明 1在绘画区画一个圆 2在时间轴上第一祯单击右键,创建补间动画 3在第25祯安F6插入关键祯, 4单击时间轴下方的左起第二个按钮,在图层上访创建一个引导层 5在引导层上用钢笔绘制一条路径 6单击图层一的第一关键帧,选中图形拖到路径的一个端点 7在单击另一个关键祯,把图形拖到引导线另一端 8用enter查看效果

animation-fill-mode : forwards //设置对象状态为动画结束时的状态 animation-fill-mode 语法：animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]默认值：none适用于：所有元素，包含伪对象:after和:before继承性：无取值：none：默认值。不设置对象动画之外的状态forwards：设置对象状态为动画结束时的状态backwards：设置对象状态为动画开始时的状态both：设置对象状态为动画结束或开始的状态说明：检索或设置对象动画时间之外的状态如果提供多个属性值，以逗号进行分隔。对应的脚本特性为animationFillMode。 这个是最简单的方法，也可以侦听动画结束事件，给元素加个class类名，这个class定义的就是元素结束时的状态的css样式

不光是css3，gif动画也是，不信你打开一个gif 滚动的时候看它还动不动。

iOS最先响应屏幕反应。响应顺序依次为Touch——Media——Service——Core架构，当用户只要触摸接触了屏幕之后，系统就会最优先去处理屏幕显示也就是Touch这个层级，然后才是媒体（Media），服务（Service）以及Core架构。

所以说，当系统接收到Touch事件之后会优先响应，此时会暂停屏幕上包括js、css的渲染。这个时候不光是css动画不动了，哪怕页面没有加载完如果你手指头还停留在屏幕上那么页面也不会继续加载，直到你的手松开。

解决办法有两个，各有瑕疵：

不要使用 scroll 事件（此事件会被暂停），而是采用 touchmove（此事件会在用户触屏滚动的时候不断触发）。瑕疵是，在结束触屏后惯性滚动的时间里，touchmove 无法被触发了（scroll 当然也不行）；

基于上一种方法，在所有的 touchmove 事件中，强行 preventDefault 阻止掉事件，然后根据 eventpageY 来手工设置所滑动元素的 scrollTop 值。当然，这样一来就没有了惯性滚动。

你也可以在 touchend 之后，手工模拟惯性滚动，计算速度以及速度衰减，可以参考各种各样的滚动插件。

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(025,01,025,1)）。

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

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

ease-in-out :规定以慢速开始和结束的过渡效果（等于 cubic-bezier(042,0,058,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 向前和向后填充模式都被应用

盒子 原来的位置 0 + 10 盒子现在的offsetLeft 10

|-5| = 5

这三个函数都是 数学函数

Math

比如说 consolelog(Mathceil(101)) 结果 是 2

consolelog(Mathceil(19)) 结果 2

consolelog(Mathceil(-13)) 结果 是 -1

比如说 consolelog(Mathfloor(101)) 结果 是 1

consolelog(Mathfloor(19)) 结果 1

consolelog(Mathfloor(-13)) 结果 是 -2

consolelog(Mathround(101)) 结果 是 1

consolelog(Mathround(19)) 结果 是 2

匀速动画的原理： 盒子本身的位置 + 步长

缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的)

( 缺陷：只能水平方向！随后的“封装运动框架单个属性会进一步改进” )

我们访问得到css 属性，比较常用的有两种：

点语法可以得到 width 属性 和 top属性 带有单位的 。 100px

但是这个语法有非常大的 缺陷， 不变的。

后面的width 和 top 没有办法传递参数的。

var w = width;

boxstylew

最大的优点 ： 可以给属性传递参数

我们想要获得css 的样式， boxstyleleft 和 boxstylebackgorundColor

但是它只能得到 行内的样式。

但是我们工作最多用的是 内嵌式 或者 外链式 。

怎么办？

核心： 我们怎么才能得到内嵌或者外链的样式呢？

外部（使用<link>）和内嵌（使用<style>）样式表中的样式（ie和opera）

两个选项是必须的， 没有伪类 用 null 替代

我们这个元素里面的属性很多， left top width ===

我们想要某个属性， 就应该 返回该属性，所有继续封装 返回当前样式的 函数。

千万要记得 每个 的意思 ： 那是相当重要

flag在js中一般作为开关，进行判断。

等动画执行完毕再去执行的函数 回调函数

我们怎么知道动画就执行完毕了呢？

很简单 当定时器停止了。 动画就结束了

案例源码：

in运算符也是一个二元运算符，但是对运算符左右两个 *** 作数的要求比较严格。in运算符要求第1个（左边的） *** 作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的） *** 作数必须是数组或对象。只有第1个 *** 作数的值是第2个 *** 作数的属性名，才会返回true，否则返回false

案例源码：

链接： > 密码：7fv8

以上就是关于如何使用JavaScript控制CSS Animations和Transitions全部的内容，包括:如何使用JavaScript控制CSS Animations和Transitions、怎麼停止css3属性animation，求助、如何停止CSS3的动画等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！