CSS 动画

css动画animate，各种动画效果。

小部分效果：

这个css动画原网站http://daneden.me/animate。

例子代码：

	
	
	
	
	



	
Animates
	

		
			
				bounce
				flash
				pulse
				rubberBand
				shake
				swing
				tada
				wobble
				jello
			
			
				bounceIn
				bounceInDown
				bounceInLeft
				bounceInRight
				bounceInUp
			
			
				bounceOut
				bounceOutDown
				bounceOutLeft
				bounceOutRight
				bounceOutUp
			
			
				fadeIn
				fadeInDown
				fadeInDownBig
				fadeInLeft
				fadeInLeftBig
				fadeInRight
				fadeInRightBig
				fadeInUp
				fadeInUpBig
			
			
				fadeOut
				fadeOutDown
				fadeOutDownBig
				fadeOutLeft
				fadeOutLeftBig
				fadeOutRight
				fadeOutRightBig
				fadeOutUp
				fadeOutUpBig
			
			
				flip
				flipInX
				flipInY
				flipOutX
				flipOutY
			
			
				lightSpeedIn
				lightSpeedOut
			
			
				rotateIn
				rotateInDownLeft
				rotateInDownRight
				rotateInUpLeft
				rotateInUpRight
			
			
				rotateOut
				rotateOutDownLeft
				rotateOutDownRight
				rotateOutUpLeft
				rotateOutUpRight
			
			
				slideInUp
				slideInDown
				slideInLeft
				slideInRight
			
			
				slideOutUp
				slideOutDown
				slideOutLeft
				slideOutRight
			
			
				zoomIn
				zoomInDown
				zoomInLeft
				zoomInRight
				zoomInUp
			
			
				zoomOut
				zoomOutDown
				zoomOutLeft
				zoomOutRight
				zoomOutUp
			
			
				hinge
				jackInTheBox
				rollIn
				rollOut
			
		
		动画
	
	
	
	

CSS动画

1、animated（animation-duration: 1.3s; 持续时间，animation-fill-mode: both;动画播放前后动画效果）

2、动画开始事件

3、动画结束移除动画事件

4、css代码实现动画主要几个属性：
    animation-duration: 1.3s; /* 持续时间 */
    animation-fill-mode: both; /* 规定动画在播放之前或之后，其动画效果是否可见 */
    animation-iteration-count: infinite; /* 动画的播放次数：infinite-无限次 */
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* 动画的速度曲线 */
    transform: translate3d(0, 0, 0); /* 设置对元素进行旋转、缩放、移动或倾斜 */
    transform-origin: center bottom; /* 改变被转换元素的位置 */
    animation-name: bounce; /* 为 @keyframes 动画规定名称 */
    @keyframes xxx /* 动画实现主要属性，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式，以百分比来规定改变发生的时间 */
    from,to /* "from"等价于0%; "to"等价于100% */
    opacity: 0; /* 透明度 */
    visibility: visible; /* 是否可见 */
    
    visibility: hidden; /* 占空间 */
    display: none; /* 不占空间 */

 

    代码下载