您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站也有正规军!我们做的模板网站有永易搜CMS终身使用授权,正版系统、无惧侵权!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

建站咨询电话
0371-56789-390

CSS3动画之transition详解
发表:紫石头原创模板堂    发表时间:2019-06-17 10:07:56    阅读:143
    CSS3动画的属性主要分为三类:transform、transition以及animation。下面紫石头小编主要来讲一讲transition的知识:
    这个属性是css3里的,具体的浏览器兼容性大家可以去Can I Use里面查看。
    语法
    transition: property duration timing-function delay;
    定义和用法
    transition 属性是一个简写属性,用于设置四个过渡属性:
    transition-property     规定设置过渡效果的 CSS 属性的名称。
    transition-duration     规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function     规定速度效果的速度曲线。
    transition-delay           定义过渡效果何时开始。
    注释:请始终设置 transition-duration属性,否则时长为 0,就不会产生过渡效果。
    transition-duration
    在CSS3引入transition之前,所有的状态变化都是瞬间完成的,可以看个例子https://stern188.github.io/speech/css/html/transition.html。如果给状态变化指定:
    transition: 1s;
    这样状态就可以延迟到1s完成。这个效果也可以在上面的例子中演示,把注释的样式放开就行(下同)。
    transition-property
    如果你想让状态只在某一个属性上延迟,比如height,我们就可以这样写:
    transition: 1s height;
    这样状态就只在高度上延迟到1s完成。但是,不是所有的CSS属性都支持transition,完整的列表查看这里,以及具体的效果
    transition-delay
    在同一行transition语句中,可以分别指定多个属性。
    transition: 1s height, 1s width;
    如果想让height先发生变化结束以后,再让width发生变化。可以为width指定一个delay参数。
    transition: 1s height, 1s 1s width;
    transition-timing-function
    但是,状态的变化速度,默认不是匀速的,而是逐渐放慢(ease)。
    transition: 1s ease;
    除了ease以外,还有其他模式:
    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:和ease类似,但比ease幅度大(等于 cubic-bezier(0.42,0,0.58,1))。

    cubic-bezier函数:自定义速度模式。可能的值是 0 至 1 之间的数值。

    这里写图片描述
    语法为:cubic-bezier (x1,y1,x2,y2)
    其中起始点固定值为A(0,0),终止点固定为D(1,1)剩下的中间点B(x1,y1),C(x2,y2)也就是所要动态操控的两个点了,对应cubic-bezier (x1,y1,x2,y2)中的四个参数,通过改变B,C两点的坐标值来动态生成一条贝塞尔曲线表示动画中的速度变化。这个cubic-bezier,可以使用工具网站来定制。
    transition: 1s height cubic-bezier(.83,.97,.05,1.44);
    上面的代码会产生一个最后阶段放大过度、然后回缩的效果。
    transition-timing-function实例请戳:transition-timing-function.html
    transition
    以上各个属性可以简写为:
    transition: 1s 1s height ease;
    需要注意的是各个属性的顺序可以更改,但是transition-duration和transition-delay这两个属性之间的顺序必须是一前一后。
    总结
    目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。
    不是所有的CSS属性都支持transition。
    transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。
    transition需要事件触发,所以没法在网页加载时自动发生。
    transition是一次性的,不能重复发生,除非一再触发。
    一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
    transition: 1s height, 1s 1s width;//像这条样式,算两条规则。
    animation就是为了解决这些问题而提出的。 transition也经常结合transform来使用。

本文作者:紫石头原创模板堂

十六年网站建设相关经验
一站式为您提供网站相关服务

欢迎扫码咨询

模板推荐
  • 律师网站类模版
    律师网站类模版/原创、SEO细节调优、多业通用好模板
    简洁大方、利于SEO、多行通用
    ¥3200元
  • 搜易支付类网站模板
    搜易支付类网站模板/界面简洁、多行业通用、易于SEO
    专业设计、高端大气、适合多个行业
    ¥3200元
  • 商场小程序模版
    版式精美,源码原创,简单易用
    功能源码可修改,可定制功能
    ¥2600元
  • 黑色过审单页
    源码原创/易于SEO/适于多行业
    源码原创,适用于网站过审
    ¥1700元
  • 清新大气饮料模板
    源码原创/易于SEO/适于多行业
    清新饮料模板,源码原创,使用范围广
    ¥3200元
  • 证书查询系统模板
    源码原创/简单易用/适于多行业
    证书查询功能,简单易用,源码可修改
    ¥3200元
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2024 zishitou.com All Rights Reserved 永易搜旗下紫石头原创模板堂 版权所有 豫ICP备14011598号-7 营业执照