前端怎么制作动画效果

发布时间:2021-08-06 10:10:19 作者:chen
来源:亿速云 阅读:163

本篇内容主要讲解“前端怎么制作动画效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“前端怎么制作动画效果”吧!

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

  前端怎么制作动画

  css的transition。

  语法:

  transition:propertydurationtiming-functiondelay;

  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)。

  默认值分别为:all0ease0

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

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

到此,相信大家对“前端怎么制作动画效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. CSS3如何制作动画效果
  2. jQuery制作输入文字弹幕显示动画效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

前端

上一篇:怎么在Linux下使用ss命令代替netstat

下一篇:如何解决某些HTML字符打不出来的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》