在线建站培训
您的位置: 魔客吧 网页制作 CSS教程 查看内容

前端制作动画的几种方式(css3,js)

2017-8-2 08:19 | 发布者: moke | 栏目:CSS教程

制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式。

1.css的transition。

语法:

transition: property duration timing-function delay;

property:填写需要变化的css属性如:width,line-height,font-size,color等;

duration:完成过渡效果需要的时间(2s 或者2000ms)

timing-function:完成效果的速度曲线(linear,ease,ease-in,ease-out等等)

描述
linear匀速(等于 cubic-bezier(0,0,1,1))。
ease从慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1))。
ease-in慢慢变快(等于 cubic-bezier(0.42,0,1,1))。
ease-out慢慢变慢(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out先变快再到慢(等于 cubic-bezier(0.42,0,0.58,1))。渐显渐隐效果
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

timing-delay:动画效果的延迟触发时间(2s 或者2000ms)。

默认值分别为:all 0 ease 0

transition抓住了所设置变化属性的起始态和完成态,通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性,默认为all,则所有变化的属性都会在出发时,以动画的形式展现出来。

这种动画方式是css3的,因此ie9以下是不支持的,其他的浏览器需要加前缀,并且只有两态,不支持自定义中间的状态。

例子:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style type="text/css">
 
div
 
{
 
width:100px;
 
height:100px;
 
background魔客吧温馨提示:如果您是第一次建站,那么魔客吧推荐大家使用 织梦 系统。完全开源,易于二次开发,对搜索引擎SEO友好,新手首选。

最新分享资源

最新评论

验证码 换一个