CSS3 动画基本使用

css 使用 transition（平滑过渡）、animation （动画）、transform （转换）实现动画效果。

transition 过渡

CSS3 过渡是元素样式改变的效果，需要规定希望将效果添加到的CSS属性和效果的时长。

属性	描述
`transition`	简写属性，用于在一个属性中设置四个过渡属性。
`transition-property`	规定应用过渡的 CSS 属性的名称。
`transition-duration`	定义过渡效果花费的时间。默认是 0。
`transition-timing-function`	规定过渡效果的时间曲线。默认是 "ease"。
`transition-delay`	规定过渡效果何时开始。默认是 0。

transition
- transition:transition-property transition-duration transition-timing-function transition-timing-delay
- transion:transition-property transition-duration
transition-property

transition-timing-function

值	描述
linear	规定以相同速度开始和结束的过渡效果（等同于cubic-bezier(0,0,1,1)）。
ease	慢速开始，然后变快，然后慢速结束（等同于cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	以慢速开始（等同于cubic-bezier(0.42,0,1,1)）。
ease-out	以慢速结束（等同于cubic-bezier(0,0,0.58,1)）。
ease-in-out	以慢速开始和结束（等同于cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

实例：

应用于宽度属性的过渡效果，时长为 2 秒。

div{
    100px;
    height:100px;
    background:yellow;
    transition:width 2s; 
    -moz-transition:width 2s;		/* Firefox 4 */
    -webkit-transition:width 2s;	/* Safari 和 Chrome */
    -o-transition:windth 2s;		/* Opera */
    -ms-transition:width 2s;		/* IE 9 */
}
div:hover{
    300px;
}

CSS 属性改变的典型时间是鼠标指针位于元素上时，当指针移出元素时，逐渐变回原来的样式。

animation 动画

使用 @keyframe 规则创建动画。在@keyframe中规定某项CSS样式，结合animation属性实现动画效果。

属性	描述
`@keyframes`	规定动画。
`animation`	所有动画属性的简写属性。除了`animation-paly-state`。
`animation-name`	`@keyframe` 动画名称
`animation-duration`	完成一个周期所花费的秒或毫秒
`animation-timing-function`	动画的速度曲线，默认`ease`
`animation-delay`	动画何时开始
`animation-iteration-count`	动画被播放的次数，默认1
`animation-direction`	动画是否在下一周期逆向地播放。默认`normal`
`animation-play-state`	动画是否正在运行或暂停。默认`running`
`animation-fill-mode`	动画时间之外的状态

@keyframe 定义和语法

创建动画的原理是将一套css 逐渐改变为另一套css。

以百分比来规定改变的时间，或者通过关键字 from 和 to，等价于 0% 和 100%

语法：

@keyframes name { keyframe-selector {css-styles;} }

@-moz-keyframes mymove /* Firefox */
@-webkit-keyframes mymove /* Safari 和 Chrome */
@-o-keyframes mymove /* Opera */

值	描述
name	必填。动画名称
keyframe-selector	必填。动画时长的百分比。合法值：0 - 100%、from（等同0%）、to（等同100%）
css-styles	必须。一个或多个合法css属性

实例：

/* 两秒内将div宽度从200px 改变到 300px */
/* 语法一 */
@keyframe widthChange{
    from{ 200px;},
    to{ 300px;}
}
/* 语法二 */
@keyframe widthChange{
    0%  { 200px;},
    50% { 250px;},
    100%{ 300px;}
}

div{
    200px;
    height:200px;
    background-color:#fff;
    animation:widthChange 2s;
}

animation

按照属性表中属性的顺序，可以是两个或者多个。

例如：animation:animation-name animation-duration 、animation:animation-name animation-duration animation-timing-function
animation-timing-function

同 transition-timing-function 值相同。
animation-direction

值描述

normal 默认值。动画正常播放

alternate 动画逆向播放
animation-play-state

值描述

paused 规定动画已暂停。

running 规定动画正在播放。

值	描述
`normal`	默认值。动画正常播放
`alternate`	动画逆向播放

值	描述
paused	规定动画已暂停。
running	规定动画正在播放。

animation-fill-mode

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

transform 转换

通过转换，能够对元素进行移动、缩放、转动、拉伸或拉长。

新的转换属性

下面的表格列出了所有的转换属性：

属性	描述
`transform`	向元素应用 2D 或 3D 转换。
`transform-origin`	允许你改变被转换元素的位置。

2D转换

函数	描述	示例
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。	值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。	值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	值 rotate(30deg) 把元素顺时针旋转 30 度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。	值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

3D转换

Opera 不支持 3D 转换。

转换属性

下面的表格列出了所有的转换属性：

属性	描述
`transform`	向元素应用 2D 或 3D 转换。
`transform-origin`	允许你改变被转换元素的位置。
`transform-style`	规定被嵌套元素如何在 3D 空间中显示。
`perspective`	规定 3D 元素的透视效果。
`perspective-origin`	规定 3D 元素的底部位置。
`backface-visibility`	定义元素在不面对屏幕时是否可见。

3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

样例

满屏泡泡

满屏泡泡主要是实现不同大小的多个 3D 球体在屏幕上从下到上的运动的效果。

实现步骤：

画3D球体
- 先画圆
- 加径向渐变
动画
js控制
- 控制每个球体动画的延迟时间和一个周期时间
- 控制不同球体的位置、大小、径向渐变

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>泡泡全屏动画-demo</title>
	<style type="text/css">
		body{
			background-color: #050647;
			overflow: hidden;
		}
		.circle{
			position: absolute;
			border-radius: 50%;
			top: 100%;
			animation-name: move;
			animation-iteration-count: infinite;		/* 一直循环运动 */
			animation-timing-function: linear;
		}
		
        /* 动画-改变球体的top属性 */
		@keyframes move{
			from{ top:100%; }
			to{ top:-40px; }
		}
		@-webkit-keyframes move{
			from{ top:100%; }
			to{ top:-40px; }
		}
	</style>
</head>
<body>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	
	<script type="text/javascript">
		var colors = ['#e22571','#8A2BE2','#985525','#45832a','#90afe2'];
        //遍历每个球体
		var divs = document.querySelectorAll('.circle');
		for (var i = 0; i < divs.length; i++) {
			var index = Math.ceil(Math.random()*colors.length);
			var color = colors[index];
            //设置径向渐变
			divs[i].style.background = 'radial-gradient(circle at 15px 15px,' + colors[index] + ', #aa2c9e)';
            //设置大小和位置
			var wh = (Math.random()*40 + 10) + 'px';
			divs[i].style.width = wh;
			divs[i].style.height = wh;
			divs[i].style.left = Math.ceil(Math.random()*100) + '%';
            //设置动画何时开始
			divs[i].style.animationDelay = Math.ceil(Math.random()*6) + 's';
            //设置动画的一个周期时间
			divs[i].style.animationDuration = Math.ceil(Math.random()*5) + 's';
		}
	</script>
</body>
</html>

心跳

实现步骤：

画心形

大概画图步骤，先画一个固定大小的div，使用伪类 after、before 和 position:absolute 构建两个长方形，之后长方形上边两个角使用 border-radius:50% 50% 0 0 控制，然后做 2D旋转一定角度（transform:rotate(45deg)），最后再填充背景色即可。
动画

控制心形在1s内放大两次。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>心跳</title>
	<style type="text/css">
		.heart{
			margin: 25%;
			 200px;
			height: 200px;
			animation: heart 1s infinite;
		}
		.heart:before,.heart:after{
			content: '';
			position: absolute;
			 130px;
			height: 200px;
			background: red;
			border-radius:50% 50% 0 0;
		}
		.heart:before{
			right: 0;
			transform: rotate(49deg);
		}
		.heart:after{
			transform: rotate(-49deg);
		}
		
		@keyframes heart{
			0% {transform: scale(1,1); }
			30% {transform: scale(1.1,1.1); }
			50% {transform: scale(1,1); }
			75% {transform: scale(1.1,1.1); }
			80% {transform: scale(1,1); }
			100% {transform: scale(1,1); }
		}
	</style>
</head>
<body>
	<div class="heart"></div>
</body>
</html>