用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现.

CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段.

例如我们想在动画效果完成时调用回调函数来处理一些事务,会发现CSS并没有提供直接的方法来让我们使用.

一.css动画简介

css动画效果有两种,即过渡和动画.

1.过渡

当元素从一种样式转变为另一种样式,我们为这种转变添加动画效果,这种效果就称作过渡.

CSS的过渡是通过 transtion 属性实现的.

transtion属性必须包含以下两个值:

要添加过渡效果的样式属性名
过渡效果持续时间

另外还有两个可选的属性值:

过渡效果的速度时间曲线函数
过渡效果的延迟时间

下面是一个CSS过渡效果的例子:

   div{

      width: 100px;

      transition: width 2s;

      -webkit-transtion:width 2s;

    }

    div.hover{

      width: 300px;

    }

当鼠标移动到此div上时,此div宽度会增加200px.

我们为宽度添加上 2s 过渡效果.最后效果如下:

2.动画

在实现比较复杂的动画时,单纯使用过渡已经无法达到目的,可以选择使用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代码和CSS代码相互关联耦合,修改和维护比较麻烦
存在多个动画需要回调时会造成代码混乱和臃肿
在多个动画效果同时结束时会引起回调函数冲突

因此,不建议使用延时函数作为动画的回调函数.

二.JS事件

其实,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">&nbsp;</div>

<script>

document.getElementById("test").addEventListener("transitionend", myFunction);

function myFunction() {

    this.innerHTML = "回调函数触发div变为粉色";

    this.style.backgroundColor = "pink";

}

</script>

效果如下:

当然也可以使用Jquery库的动画回调函数,很简单,代码类似如下,

   $("#item").animate({height:"200px"}, function() {

        alert("hello");

    });

以上就是关于CSS动画回调函数的一些知识,希望对你有帮助.

CSS动画效果的回调的更多相关文章

原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
CSS动画效果
CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放大于1放大 ...
CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
运动曲线提升CSS动画效果
原文链接译文\译者鞠大宝先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...
css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点 ...
CSS动画效果之animation
Y(^o^)Y css动画大乱弹之animation. 概述什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...
react中使用css动画效果
index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...

随机推荐

css实现下拉菜单
实现一个效果不难,难的是使用最少的代码实现一个效果 <!DOCTYPE html> <html lang="en"> <head> <me ...
关于SQL调优（Distinct 和 Exits）
今天写了一段查询人员Id和人员编号的,由于需要从其他的表中取条件,因为人员表和另外的表对应的是一对多的关系,所以我使用了Distinct关键字对用户编号进行去重复,然后发现那个效率简直没法看,然后旁边 ...
PHP GD库生成图片自动换行函数，自动分页函数
/* 文字自动换行 * @param $card 画板 * @param $pos 数组,top距离画板顶端的距离,fontsize文字的大小,width宽度,left距离左边的距离, ...
(iOS)私有API的使用（原创）
最近在做企业级程序,需要搞设备的udid等信息,但是ios7把udid私有化了,不公开使用.所以研究了一下ios的私有api. 调查了一下文章,发现这方面的文章不多,国内更是不全,高手们都懒得写基础教 ...
JDBC基础学习(六)—数据库连接池
一.数据库连接池介绍 1.数据库连接池的缘由对于一个简单的数据库应用,由于对于数据库的访问不是很频繁.这时可以简单地在需要访问数据库时,就新创建一个连接,用完后就关闭它,这样做也不会带来什 ...
人生第一次hash
人生的第一次hash交给了模板题. 讲道理,还没有别人快排要快,就比暴力快那么一点... 难道我写的hash就那么菜么? 我想了想,光是处理字符串就O(n*len).. 这是hash的正确写法吗?我都 ...
html 数字不转行问题
代码如下 <div style="width:20px;height:20px"> 111111111111111111111111111111111111111111 ...
struts1实现简单的登录功能（附源码）
环境:MyEclipse 14 ...
需求收集实例二之 GF Phase 2
GF Phase 2 做B2B的site, 需求收集过程与需求收集过程实例之 - GF Phase 1主要的不同是在phase 1 开发在需求规格文档敲定后开始,而phase 2 把feature ...
yii框架后台过滤器的使用安全防护
Yii过滤器简介过滤器是一段代码,可被配置在控制器动作执行之前或之后执行.例如, 访问控制过滤器将被执行以确保在执行请求的动作之前用户已通过身份验证:性能过滤器可用于测量控制器执行所用的时间. 一个 ...