CSS3有哪些新增的东西呢???(续2)

CSS3 动画

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

一、动画的基本使用

  1.定义动画

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

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

    动画序列:

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

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

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

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

  2.调用动画

    使用定义的动画:div{width: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秒后开始 无限重复 反方向;)

 

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

 

猜你喜欢

转载自www.cnblogs.com/ruiannan/p/11986525.html