用纯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动画回调函数的一些知识,希望对你有帮助.

转载于:https://www.cnblogs.com/afei-qwerty/p/6869023.html

CSS动画效果的回调相关推荐

html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
CSS动画效果构成分析
CSS动画特效的基本构成文章目录 CSS动画特效的基本构成 CSS动画效果一.动画轨迹,运动路径 1.规定目标样式属性transfrom: 二.控制运动路径 transition animati ...
css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
Html/CSS动画效果个人练习（11）
CSS动画效果个人练习第十一天 Html源代码 <!doctype html> <html> <head> <meta charset="utf-8 ...
jQuery及css动画效果
1.jQuery动画效果首先引入jQuery,进入链接地址:https://www.bootcdn.cn/jquery/ <!DOCTYPE html> <html lang=&q ...

CSS动画效果的回调

一.css动画简介

1.过渡

2.动画

二.JS事件

CSS动画效果的回调相关推荐

最新文章

热门文章