CSS3-Animation学习总结：keyframeAnimation属性动画重置技巧

一、keyframe（关键帧）

CSS3中的动画，其实是通过改变每一帧中元素的样式来实现的。通过在动画序列中定义关键帧的样式可以控制CSS动画序列中的中间步骤。

@keyframes slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}
}

上面的例子中大家可以看到，使用关键帧需先创建一个带名称的@keyframes规则，一个keyframes规则中可以有多个关键帧。例子中有两个关键帧from和to，分别对应这个动画的开始与结束。当然也可以通过使用百分比来定义关键帧，from代表的是0%，而to代表的是100%。

二、Animation属性

1、animation-delay

animation-delay 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。可以简单地理解为经过多久时间开始执行这段动画。

animation-delay: 3s;

2、animation-direction

animation-direction 属性指示动画是否反向播放，它有四个属性：

（1）normal：每个动画循环内动画都是向前循环，循环结束后动画会回到一开始的位置。
（2）reverse：每个动画循环内动画都是反向循环，也就是说动画是从尾部执行到头部的。
（3）alternate：动画会从头部开始交替运行，也就是说动画会先从最开始的位置运行到最后的位置，再从最后的位置运行到最开始的位置，直到循环结束。
（4）alternate-reverse：动画会从尾部开始交替运行，也就是说动画会先从最后的位置运行到最开始的位置，再从最开始的位置运行到最后的位置，直到循环结束。

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse

3、animation-duration

animation-duration属性指定一个动画周期的时长，比方设置为1s说明这个动画会在1s内结束，当然也可以使用ms作为单位。

animation-duration: 6s
animation-duration: 120ms

4、animation-fill-mode

animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标，它有四个属性：

（1）none：这是默认值，表示动画未执行时不会将任何样式应用到目标元素上，而是采用该元素原先设定好的css来显示。
（2）forwards：目标保留执行期间最后一个关键帧的计算值，也就是说动画执行完成后会保留最后一帧的样式。
（3）backwards：动画将在应用于目标时立即应用第一个关键帧中定义的值，并在动画运行期间保留此值。也就是说在动画即将运行之前会立刻将第一帧的样式赋值给目标元素。
（4）both：动画同时应用forwards与backwards属性

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

5、animation-iteration-time

animation-iteration-time属性定义了动画在结束前运行的次数。
你可以设置为infinite，这个值是无限的意思，也就是说这个动画会一直运行下去。
也可以设置为数字，2的话代表这个动画会运行两次，0.5的话代表这个动画会执行到50%就结束。

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.4;

6、animation-name

animation-name属性指定应用于目标属性的一系列动画，代表一个由@keyframes定义的动画序列。

7、animation-play-state

animation-play-state属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

animation-play-state: running;
animation-play-state: paused;

8、animation-timing-function

animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个。

这里推荐一篇关于cubic-bezier的博文，个人感觉挺好理解的：
贝塞尔曲线——cubic-bezier详解

三、重置动画小技巧

如果想让一个已经结束的动画重新执行，可以使用删除目标元素的动画效果，让文档重新计算样式保存该操作，然后再将动画效果加回该元素的方式来做到。下面是一个例子：

function play() {document.querySelector(".box").className = "box";window.requestAnimationFrame(function(time) {window.requestAnimationFrame(function(time) {document.querySelector(".box").className = "box changing";});});
}

我们先将该元素的类列表设置为不含动画效果的类名，这里是"box"，这个时候文档是还没有重新计算的，所以这个设置不会生效。
我们可以使用requestAnimationFrame函数来解决这个问题。requestAnimationFrame函数的回调会在下一次重绘页面之前执行，我们在requestAnimationFrame函数的回调中再加一个requestAnimationFrame函数的回调。这个时候整个程序的流程是这样子的：

1、先将目标元素的类列表设置为不含动画效果的类名。这个时候此操作还没生效。
2、遇到第一个requestAnimationFrame函数，发现它的回调函数中又调用了一次requestAnimationFrame函数。执行完第一个回调后文档被重新计算，第一步的操作生效。
3、执行第二个requestAnimationFrame函数中的回调，将目标元素类列表设置为包含动画效果的，这个时候此操作也还没生效。
4、回调执行完成后文档重新计算，这个时候第三步的操作生效，动画被重置。

CSS3-Animation学习总结：keyframeAnimation属性动画重置技巧相关推荐

CSS3 animation实现点点点loading动画
一.再续前缘去年夏天,写了篇名为"CSS3 animation渐进实现点点点等待提示效果"的文章,主要内容是实现类似下面打点等待提示效果,比干巴巴的字符...要更人性化: 之前实 ...
html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果
这次我们来实现一个简单又很有意思的动画效果,完全由CSS 的animation来实现,素材和源码来自于其他网站,个人对源码做了一些改动优化完成后的效果--旋转效果 (github pages打开特别 ...
CSS3 -- API学习 (2D、3D动画效果)
一.2D效果 1.translate(xpx,ypx).translateX(xpx),translateY(ypx) 右平移xpx,左平移ypx <!DOCTYPE html&g ...
走进绚烂多彩的属性动画-Property Animation（上篇）
转载请注明出处(万分感谢!): http://blog.csdn.net/javazejian/article/details/52273733 出自[zejian的博客] 关联文章: 走进绚烂多彩的 ...
Android 属性动画Property Animation(中)
Android 属性动画Property Animation(上)介绍了属性动画的概念以及相关的类和接口,本篇来看下具体肿么使用. ValueAnimator ValueAnimator指定整形.浮点 ...
安卓动画全解：补间动画（视图动画）、布局动画、属性动画、逐帧动画。动画Animation属性、Alpha属性、Scale属性、Translate属性、Rotate属性，动画集AnimationSet
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓动画全解:补间动画(视图动画).布局动画.属性动画.逐帧动画. 主要内容包含:动画Animation属性.Alpha属性.Scale属性.Tran ...
安卓动画学习（六）--xml实现属性动画
安卓动画学习--xml实现属性动画属性动画也可以在xml文件实现,来看看吧 xml文件实现方法先在res文件下右键,选择Android resource directory 在第二栏resourc ...
Android属性动画（Property Animation）
前言属性动画系统是一个强大的框架,可以用来为添加几乎各种动画.你可以通过按时间改变对象的属性来定义任何动画,无论这个对象是否被绘制在屏幕内.一个属性动画在特定的时间范围内改变一种属性(也就是一个对象 ...
CSS3(animation, trasfrom)总结
CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @k ...

CSS3-Animation学习总结：keyframeAnimation属性动画重置技巧

CSS3-Animation学习总结：keyframeAnimation属性动画重置技巧相关推荐

最新文章

热门文章