HTML5-CSS3新增特性-（笔记）（2）

过渡效果（Transition）

使用过渡可以动态地改变一个颜色的值，以动画的形式过渡到另一个颜色

简写格式：
	transition:transition: 过渡属性 过渡时间(不能省略) 过渡效果 延迟时间;

这些属性也可以进行分别定义：

transition-property属性

可以使用transition-property属性来指定要参与过渡的css属性名

格式：
	transition-property: none | all | property;
参数：
		none表示没有要过渡的属性
		all 表示对所有属性应用过渡
		property 表示CSS属性名称，多个名称之间用逗号分隔。

transition-duration属性

transition-duration 属性是用于指定过渡的时长，即从旧属性转换到新属性花费的时间，单位为秒（s）

格式：
	transition-duration: time;
参数：
	time 表示完成动画所需的秒数，默认为0，即没有过渡效果。
注意：
	这个在简写时不能省略

transition-timing-function属性

transition-timing-function属性是整个过渡动画的核心，它用于指定用什么样的方式进行过渡。

格式：
	transition-timing-function: effectname;
参数：
	effectname 表示过渡效果的名称，默认值是ease，即以溶解方式进行过渡

transition-timing-function属性的值还有许多：

值	作用
ease	刚开始慢然后变快最后在慢的效果，默认值
linear	匀速开始至匀速结束的过渡效果
ease-out	以慢速结束的过渡效果
ease-in	以慢速开始的过渡效果
cubic-bezier	自定义特殊的贝塞尔曲线效果

transition-delay属性

transition-delay属性用于定义动画开始之前的延迟时间。

格式：
	transition-delay: time;
参数：
	time 表示时间，可以设置为s（秒）或者ms（毫秒），默认值为0，即表示没有延迟

动画效果

  CSS3除了支持过渡的动画效果外，还可以使用animation属性实现更为复杂的动画效果。CSS中的动画效果与过渡效果类似，都是通过不断改变元素的属性值来实现动画效果的。他们的区别在于，使用过渡效果时只能通过属性指定开始状态和结束状态，然后再两个状态之间过渡，而不能对过渡中间的状态进行控制。而使用animation属性可以通过多个关键帧来定义动画中的各个状态，从而实现更为复杂的动画效果。

关键帧（keyframes）

在使用动画效果之前必须先定义关键帧，一个关键帧表示动画过程的一个状态，在css3中提供@keyframes属性用来定义关键帧

格式：
	@keyframes animationName {
		Keyframes-selector {css-styles;}
	}
参数：
	animationName
		表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
	Keyframes-selector
		关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。
		其中from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。
	css-styles 
		定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

动画属性

用@keyframes属性定义好动画的关键帧之后，他还没有应用到任何页面元素上，因此还不能执行。这就需要使用CSS3中的animation属性，需引入

animation-name 属性

该属性用于定义要应用的动画名称

格式：
	animation-name: animationName;
参数：
	animationName指的是使用@keyframes属性定义的动画名称。
	如果值为none则表示不应用任何动画效果，通常用于覆盖或取消动画。

animation-duration属性

该属性用于定义整个动画效果完成所需要的时间

格式：
	animation-duration: time;
参数：
	time 参数是以秒（s）或则毫秒（ms）为单位的时间，默认是0表示没有动画。

animation-timing-function属性

该属性用于定义使用哪种方式执行动画效果，跟过渡的transition-timing-function属性几乎是一样的

格式：
	animation-timing-function: effectname;
参数：
	effectname表示过渡效果的名称

已有的定义好的效果如下：

值	作用
linear	以匀速的方式开始的动画效果
ease	刚开始慢然后变快最后在慢的动画效果，默认值
ease-out	以慢速结束的动画效果
ease-in	以慢速开始的动画效果
ease-in-out	以慢速开始和结束
cubic-bezier	自定义特殊的贝塞尔曲线效果

animation-delay 属性

该属性用于定义执行动画效果之前的延迟时间

格式：
	animation-delay: times;
参数：
	times 参数是以秒（s）或则毫秒（ms）为单位的时间，默认是0表示没有延迟。

animation-iteration-count属性

该属性用于定义当前动画效果重复执行的次数

格式：
	animation-iteration-count: n|infinite;
参数：
	n 表示动画执行几次，是一个整数，默认为1
	infinite 表示该动画无限次重复执行

animation-direction 属性

该属性用于定义当前动画效果播放的方向

格式：
	animation-direction: direction;
参数：
	direction参数有两个值：
		normal 默认值，表示每次动画都从头开始执行到最后
		alternate 表示动画播放到最后时将反向播放，即从最后状态逆向播放到开始状态。
建议：
	当animation-iteration-count（动画执行次数）为infinite（无限次执行时）  使用alternate 参数效果会更好

animation-fill-mode 属性

该属性用于定义动画开始之前或者播放之后，其动画效果是否可见

animation-fill-mode:forwards | backwards | both;

其参数如下：

值	作用
forwards	表示在动画完成后继续使用最后一个关键帧里面的样式 （保留完成时的动作）
backwards	表示在动画开始之前使用初始关键帧里面定义的样式
both	同时应用forwards和backwards的效果

animation-play-state属性

该属性用于动画的播放和暂停

格式：
	animation-play-state:running|paused;
参数：
	running 动画开始
	paused 动画结束

动画简写属性

所有动画属性的简写属性，除了 animation-play-state 属性

格式：
	animation: animation-name  			引用@keyframes定义的动画名称
			animation-duration 			动画执行的时间
			animation-timing-function 	动画执行效果
			animation-delay 			动画执行效果之前的延迟时间
			animation-iteration-count 	动画的执行次数
			animation-direction 		动画的执行方向
			animation-fill-mode;		动画开始之前与播放之后的显示效果

弹性盒模型

css3弹性盒子模型

如有错误还请指出，希望这篇文章能给予你们帮助！