zoukankan      html  css  js  c++  java
  • CSS3新增属性(3)

    CSS3 动画

    动画(animation)是css3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或者一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

    一、动画的基本使用

      1.定义动画

        用keyframes 定义动画(类似定义类选择器)

        @keyframes 动画名称{ 0%{100px;} 100%{200px;} }

        动画序列:

          0% 是动画的开始,100%是动画的完成,这样的规则就是动画序列。

          在@keyframes 中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。

          动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式,任意多的次数。

          使用百分比来规定变化发生的时间,或用关键词“form” 和 “to” ,等同于0% 和 100%。

      2.调用动画

        使用定义的动画:div{100px;height:100px; animation-name:动画名称; animation-duration:持续时间; }

      

    二、动画常用属性

    1. @keyframes 规定动画。
    2. animation 所有动画属性的简写属性,出了 animation-play-state 属性。
    3. animation-name 规定@keyfrmanes 动画的名称 (必须的)。
    4. animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是0 (必须的)。
    5. animation-timing-function 规定动画的速度曲线,默认是"ease"。
      • 速度曲线的值:
        • linear 动画从头到尾的速度是相同的。匀速
        • ease 默认值。低速到高速到低速
        • ease-in 动画低速开始
        • ease-out 动画低速结束
        • ease-in-out 动画低速开始和结束
        • steps() 指定了时间函数中的间隔数量(步长)
    6. animation-delay 规定动画何时开始,默认是0。
    7. animation-iteration-count 规定动画被播放的次数,默认是1,还有infinite (无限次)
    8. animation-direction 规定动画是否存在下一周期逆向播放,默认是“normal”,alternate 逆播放
    9. animation-play-state 规定动画是否正在运行或者暂停。默认是"running" 还是 "paused"。
    10. animation-fill-mode 规定动画结束后状态,保持状态forwards or 回到起始backwards (默认状态)。

    三、动画简写属性

      animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画开始或结束状态;

      animation: myfirst 5s linear 2s infinite alternate; (动画myfirst 5秒内 匀速 2秒后开始 无限重复 反方向;)

    博客只用于记录自己学习的东西,如有错误感谢留言斧正哦!

  • 相关阅读:
    【Lintcode】112.Remove Duplicates from Sorted List
    【Lintcode】087.Remove Node in Binary Search Tree
    【Lintcode】011.Search Range in Binary Search Tree
    【Lintcode】095.Validate Binary Search Tree
    【Lintcode】069.Binary Tree Level Order Traversal
    【Lintcode】088.Lowest Common Ancestor
    【Lintcode】094.Binary Tree Maximum Path Sum
    【算法总结】二叉树
    库(静态库和动态库)
    从尾到头打印链表
  • 原文地址:https://www.cnblogs.com/ruiannan/p/11986525.html
Copyright © 2011-2022 走看看