用纯 JS 实现动画效果代码量大, 计算复杂. 因此现在前端页面的动画效果一般都采用 CSS 来实现.
CSS 动画实现简单高效, 但是在处理动画, 控制动画过程上却缺少一些有效手段.
例如我们想在动画效果完成时调用回调函数来处理一些事务, 会发现 CSS 并没有提供直接的方法来让我们使用.
css 动画效果有两种, 即过渡和动画.
当元素从一种样式转变为另一种样式, 我们为这种转变添加动画效果, 这种效果就称作过渡.
CSS 的过渡是通过 transtion 属性实现的.
transtion 属性必须包含以下两个值:
另外还有两个可选的属性值:
下面是一个 CSS 过渡效果的例子:
- div{
- width: 100px;
- transition: width 2s;
- -webkit-transtion:width 2s;
- }
- div.hover{
- width: 300px;
- }
当鼠标移动到此 div 上时, 此 div 宽度会增加 200px.
我们为宽度添加上 2s 过渡效果. 最后效果如下:
在实现比较复杂的动画时, 单纯使用过渡已经无法达到目的, 可以选择使用 CSS 的 animation 属性来定义动画效果.
要想使用 animation 属性, 我们必须先了解一下 CSS3 加入的 @keyframes 规则.
@keyframes 规则用于创建动画, 可以从动画运动状态的帧来定义动画.
如下即 @kayframes 定义动画的例子:
- @keyframes show {
- from {
- color: red;
- }
- to {
- color: yellow;
- }
- }@ - webkit - keyframes show
- /* Safari 与 Chrome */
- {
- from {
- color: red;
- }
- to {
- color: yellow;
- }
- }
通过 @keyframes 我们可以定义动画从开始到结束的样式变化 .
我们也可以通过定义动画效果的百分比状态来定义动画样式, 如下
- @keyframes show {
- 0 % {
- color: red;
- }
- 25 % {
- color: yellow;
- }
- 50 % {
- color: blue;
- }
- 100 % {
- color: green;
- }
- }@ - webkit - keyframes show
- /* Safari 与 Chrome */
- {
- 0 % {
- color: red;
- }
- 25 % {
- color: yellow;
- }
- 50 % {
- color: blue;
- }
- 100 % {
- color: green;
- }
- }
在使用 @keyframes 定义了动画效果之后, 我们可以通过 animation 来将动画效果绑定到元素, 如下:
- div:hover{
- animation:show 5s;
- }
具体效果如下:
动画文字
鼠标移动其上即可看到动画效果
以上就是 CSS 动画的简单介绍, 另外 CSS3 还添加了 transform 属性, 用于 2D 和 3D 转换, 也被经常用来作为动画使用.
二. CSS 动画的回调函数
像以上的 CSS 动画, 如果想使用回调函数来控制动画完成后的事务处理, 是比较麻烦的.
一. 延时函数
很多人使用 JS 的延时函数 setTimtout() 来解决 CSS 动画的回调问题, 类似如下的代码:
- setTimtout(function() {
- dosomething() //动画的回调函数
- },
- delaytime); //动画的持续时间
但是这种方法由于并不是真正意义的回调, 会造成以下几个问题:
因此, 不建议使用延时函数作为动画的回调函数.
其实, JS 提供了两个事件, 可以完美的解决动画的回调函数问题, 那就是 transtionend 和 animationend, 当动画完成时, 即会触发对应的事件.
我们可以通过这两个事件轻松优雅的为动画添加回调函数.
具体用法如下:
transtionend
- document.getElementById("myDIV").addEventListener("transitionend", myFunction); //myFunction即为动画回调函数
animationend
- document.getElementById("myDIV").addEventListener("animationend", myFunction); //myFunction即为回调函数
我们通过以下这个例子来体验这两个事件的具体使用:
- <style>
- div#test
- {
- width:100px;
- height:100px;
- background:red;
- transition:width 2s;
- -webkit-transition:width 2s; /* Safari */
- }
- div#test:hover
- {
- width:300px;
- }
- </style>
- </head>
- <body>
- <div id="test"> </div>
- <script>
- document.getElementById("test").addEventListener("transitionend", myFunction);
- function myFunction() {
- this.innerhtml = "回调函数触发div变为粉色";
- this.style.backgroundColor = "pink";
- }
- </script>
由于我没有博客的 JS 权限, 所以无法在这里加上演示效果, 大家可以自己复制到文件中打开, 就可以看到动画的回调函数效果了.
以上就是关于 CSS 动画回调函数的一些知识, 希望对你有帮助.
来源: http://www.cnblogs.com/afei-qwerty/p/6869023.html