分享更有价值
被信任是一种快乐

html中transition动画效果怎么用

文章页正文上

这篇文章主要介绍html中transition动画效果怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
  一、transition过渡动画
  当元素的样式从一种状态变成另一种状态的时候,产生平滑的过渡效果。
  注意:transition只能在两种不同的状态之间产生过渡动画,不能有两种以上的状态,这和animation动画不一样,所以论武力值,transition只能算阉割版的animation。
  可以把第一个状态表示为初始值。第二个状态表示为结束值。
  比如颜色从黑色变成白色,宽度从100px变成200px,透明度从1变成0.5等等,这都属于一个样式状态的变化。
  所以要对一个元素做过渡动画,必须有两个要素要满足:
  1、哪个对象要做动画。
  2、动画要执行多长时间。因为默认值是0,所以必须设置运动的时长。
  什么时候开始执行动画呢?那就是当样式的值发生改变的时候,最初级的运用就是利用:hover伪类来实现效果。
  因为兼容性的问题,低版本浏览器请加上前缀。a{
  color:#333;
  -moz-transition:?.2s;
  -webkit-transition:?.2s;
  -o-transition:?.2s;
  transition:.2s;?
  }
  a:hover{
  color:#F78500;
  }
  二、transition的属性transition-property ? 执行过渡动画的样式属性,默认值为all。
  transition-delay ? 延迟多少时间执行过渡动画,默认值0。
  transition-duration ? 执行过渡动画花费的时间,默认值为0。
  transition-timing-function ?动画执行的加减速贝塞尔曲线。默认值为ease。
  1、transition-property支持的属性。
  能够用具体的数字类的值表示的属性。不是所有的css属性都可以执行动画的,比如display就不可以,而visibility就可以。
  width、height大小类的属性,color类的属性(background-color/border-color/color等),margin、padding边距类的属性,position定位类的属性(left、top、background-position等),以及z-index/text-shadow/text-indent/opacity/visibility/transform等。
  2、transition-timing-function 时间曲线。
  这个属性非常的强大,单独拿出一篇文章来讲解都不为过。数学好的人应该都能记住贝塞尔曲线。在这里用贝塞尔曲线来表示运动的加减速等规律。
  我们常用的也就是ease-in/ease-out/linear等值。其实,它的语法规则可以有那么多↓
  transition-timing-function:?ease;
  transition-timing-function:?ease-in;
  transition-timing-function:?ease-out;
  transition-timing-function:?ease-in-out;
  transition-timing-function:?linear;
  transition-timing-function:?step-start;
  transition-timing-function:?step-end;
  trans免费云主机、域名ition-timing-function:?steps(4,?end);
  transition-timing-function:?cubic-bezier(0.1,?0.7,?1.0,?0.1);
  transition-timing-function:?frames(10);
  transition-timing-function:?ease,?step-start,?cubic-bezier(0.1,?0.7,?1.0,?0.1);
  transition-timing-function:?inherit;
  transition-timing-function:?initial;
  transition-timing-function:?unset;
  运动速度的变化很微妙,通过直观的在线效果更好理解,可以用这个在线工具直观的查看各种不同曲线产生的效果。
  还有在线生成transition动画代码的工具,真的是懒人福音。
  三、案例
  1、鼠标经过颜色的变化
  See the Pen transition过渡动画案例1 by zhaolanzhen (@mrszhao) on CodePen.
  2、鼠标经过显示和隐藏,结构有嵌套关系的下拉菜单,这个案例就利用了visibility和opacity结合完成显示和隐藏的效果,而用display:none就不可以。
  See the Pen transition过渡动画案例2 by zhaolanzhen (@mrszhao) on CodePen.
  3、鼠标经过显示和隐藏,结构没有嵌套关系,用纯CSS实现的话,鼠标移开下面的对象也会消失,不能像下拉菜单那样还能把鼠标移到下面的元素上。
  See the Pen transition过渡动画案例3 by zhaolanzhen (@mrszhao) on CodePen.
  4、鼠标经过显示和隐藏,结构没有嵌套,想鼠标移开还能移到下面对象上,需要使用js的定时器。
  See the Pen transition过渡动画案例4 by zhaolanzhen (@mrszhao) on CodePen.以上是“html中transition动画效果怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注云技术行业资讯频道!

相关推荐: C++中转换构造函数与默认函数的优先级是什么

今天小编给大家分享一下C++中转换构造函数与默认函数的优先级是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在转换构造函数中他们都是构造函数…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册