• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    11选五中奖查询:animation与transition 区别

    燕赵风采20选5走势图 www.fllv.net 2019-2-4 18:38| 作者: admin| 查看: 860| 评论: 0|来自: 蚂蚁部落

    标题中的两个属性都可以实现动画效果,某些场景下两者表现几乎一样。

    可以肯定的一点是,两个属性肯定各有特点,下面将详细分析一下两者的主要不同点。

    关于两个属性的具体用法可以参阅如下两篇文章:

    (1).animation属性参阅CSS3 animation 动画一章节。

    (2).transition属性参阅CSS3 transition 过渡一章节。

    我们知道属性的命名与其功能密切相关,先从两者的名称入手。

    (1).animation:具有"动画"和"动画片"的意思,名副其实此属性的确可以定义动画效果。

    (2).transition:具有"过渡"的意思,规定属性从一个值过渡的另一个值,虽然也具有动画效果,但是和真正的动画效果效果比太逊色了,因为它只有初始和结束两个状态,所以"过渡"是对其更为恰当的描述。

    一.动画状态的区别:

    animation动画可以通过@keyframes属性对动画进行更为精细的控制,设置多个状态。

    但是transition属性则只有两个状态,起始状态与结束状态。

    代码实例如下:

    [HTML] 纯文本查看 复制代码运行代码
    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset=" utf-8">  
    <meta name="author" content="//www.fllv.net/" />  
    <title>蚂蚁部落</title> 
    <style type="text/css"> 
    div{
      width:100px;
      height:100px;
      background:red;
      position:relative;
      top:100px;
      animation:theanimation 4s infinite alternate;
    }
    @keyframes theanimation{
      0%{left:0px;background:red;}
      25%{left:30px;background:blue;}
      50%{left:60px;background:yellow;}
      75%{left:120px;background:green;}
      100%{left:240px;background:red;}
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    代码分析如下:

    (1).一次完整的动画时长是4秒。

    (2).通过@keyframes属性将动画整个时长分为4份,在各自的时间段对动画进行控制。

    (3).也就是说animation动画可以具有多个状态,但是transtion动画只有两个状态,起始状态与结束状态。

    二.子属性的数量不同:

    两个属性都是复合属性,包含有若干个子属性,但是数目不相同。

    当然子属性数量不同会对效果有影响,很容易区分,本文不做更多介绍。

    三.触发时机不同:

    两个属性的触发时机有很大的不同,animation好比是一个自执行函数,只要定义好,立马生效触发动画。

    transition则像是一个事件处理函数(事件监听器),只有它监听的属性值发生改变,动画效果才会生效。

    很容易理解,下面再来通过代码实例进行一下演示:

    [HTML] 纯文本查看 复制代码运行代码
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=" utf-8"> 
    <meta name="author" content="//www.fllv.net/" /> 
    <title>蚂蚁部落</title> 
    <style> 
    #ant{
      width:100px;
      height:100px;
      background:blue;
      cursor: pointer;
      transition:width 2s;
    }
    #ant:hover{
      width:500px;
    }
    </style>
    </head>
    <body>
    <div id="ant"></div>
    </body>
    </html>

    代码分析如下:

    (1).通过transition属性监听div元素width属性的变化,动画在两秒内完成。

    (2).当鼠标悬浮于div之上的时候,设置width的宽度为500px,宽度的变化此时被transition坚挺到。

    (3).于是开始动画效果,宽度会进行平滑的过渡。

    但是animation属性并不具有上述监听效果,一旦定义,动画效果立马生效,与width或者height等属性一个道理。

    可能有朋友对上述结论有所怀疑,认为下面这种效果也是监听行为,其实只是一种错觉而已,代码实例如下:

    [HTML] 纯文本查看 复制代码运行代码
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=" utf-8"> 
    <meta name="author" content="//www.fllv.net/" /> 
    <title>蚂蚁部落</title> 
    <style> 
    div{
      width:100px;
      height:100px;
      background:blue;
      cursor: pointer;
    }
    @keyframes theanimation{
      from {width: 100px;}
      to {width: 500px;}
    }
    div:hover{  
      animation:theanimation 2s forwards;
    }
    </style>
    </head>
    <body>
      <div></div>
    </body>
    </html>

    上述代码中,当鼠标悬浮的时候,能够以动画方式设置div的宽度。

    貌似与前面的代码功能是一样的,也监听了"某些东西"一样,然而事实并非如此。

    首先,它并没有监听属性的变化,第二个鼠标悬浮div的时候,是为div元素定义animation动画。

    本文对两个属性的主要区别进行了大致的介绍,如果朋友感觉需要有补充的地方,可以在文章底部留言。

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 足彩半全场胜平负中奖 2018七星彩直码 新疆时时彩 时时彩龙虎和 中国竞彩足球比分直播lm0 湖南幸运赛车选号技巧 最近七星彩长条规律 即开型福彩中奖率低 极速时时彩是谁开的 赌场风云 牛牛热视频 新时时彩数据遗漏 幸运农场复式计算器 双色球彩票 中国福利彩票老时时彩 腾讯分分彩后三大底