10 09/2014

veryless animation

最后更新: Wed Sep 10 2014 12:29:11 GMT+0800

水管啊水管


  • flash

  • bounce

  • shake

  • tada

  • hinge

  • rollIn

  • rollOut

  • flip

  • flipInX

  • flipOutX

  • flipInY

  • flipOutY

  • fadeIn

  • fadeInUp

  • fadeInDown

  • fadeInLeft

  • fadeInRight

  • fadeInUpBig

  • fadeInDownBig

  • fadeInLeftBig

  • fadeInRightBig

  • fadeOut

  • fadeOutUp

  • fadeOutDown

  • fadeOutLeft

  • fadeOutRight

  • fadeOutUpBig

  • fadeOutDownBig

  • fadeOutLeftBig

  • fadeOutRightBig

  • bounceIn

  • bounceInDown

  • bounceInUp

  • bounceInLeft

  • bounceInRight

  • bounceOut

  • bounceOutDown

  • bounceOutUp

  • bounceOutLeft

  • bounceOutRight

  • rotateIn

  • rotateInDownLeft

  • rotateInDownRight

  • rotateInUpLeft

  • rotateInUpRight

  • rotateOut

  • rotateOutDownLeft

  • rotateOutDownRight

  • rotateOutUpLeft

  • rotateOutUpRight

  • lightSpeedIn

  • lightSpeedOut

veryless 的 animation css 写的不错，可以拿来用用。

css animation 参数




















































Property Description CSS
@keyframes Specifies the animation 3
animation A shorthand property for all the the animation properties, except
the animation-play-state property		 3
animation-name Specifies the name of the @keyframes animation 3
animation-duration Specifies how many seconds or milliseconds an animation takes to
complete one
cycle. Default 0		 3
animation-timing-function Describes how the animation will progress over one cycle of its duration.
Default “ease”		 3
animation-delay Specifies when the animation will start. Default 0 3
animation-iteration-count Specifies the number of times an animation is played. Default 1 3
animation-direction Specifies whether or not the animation should play in reverse on
alternate cycles. Default “normal”		 3
animation-play-state Specifies whether the animation is running or paused. Default “running” 3

可以用 jquery css 来单独控制，而且也不用 vendor prefixes 了，：）

W3school 少了一个 animation-fill-mode

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

动画结束后，停在 不应用、前面、后面、前后（都）

animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both

参考