平凡前端之路_13.CSS3过渡与动画

CSS3的过渡支持

CSS3 过渡（transition）特性能在网页制作中实现的一些简单的动画效果变得更具流线性、平滑性。

指定应用过渡的 CSS 属性 - transition-property

指定应用多个不同的过渡效果时，以逗号隔开。

transition-property可能的值	描述
none	没有属性会获得过渡效果。
all	所有可过渡的属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称，多个以逗号分隔。

eg: 
/** 兼容与支持 */
-webkit-transition-property: opacity;
		transition-property: opacity, height;

---

指定过渡效果的持续时间 - transition-duration

多个不同的过渡效果时，可以分别指定过渡效果的持续时间，以逗号隔开。
当多个值的多于所有过渡属性的数量时，那么只有相应过渡属性数量的值会生效。
当多个值的少于所有过渡属性的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有过渡效果重复应用该值，即共用相同的持续时间。

transition-duration可能的值	描述
time	指定过渡效果花费的时间。（以秒或毫秒计）。
0	默认值。意味着不会有过渡效果。

eg: 
/** 兼容与支持 */
-webkit-transition-duration: 1000ms;
		transition-duration: 1000ms, 1s;

---

指定过渡效果的时间曲线 - transition-timing-function

多个不同的过渡效果时，可以分别指定过渡效果的时间曲线，以逗号隔开。
当多个值的多于所有过渡属性的数量时，那么只有相应过渡属性数量的值会生效。
当多个值的少于所有过渡属性的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有过渡效果重复应用该值，即共用相同的时间曲线。

transition-timing-function可能的值	描述
linear	规定以相同速度开始至结束的过渡效果。
ease	默认值。规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in	规定以慢速开始的过渡效果。
ease-out	规定以慢速结束的过渡效果。
ease-in-out	规定以慢速开始和结束的过渡效果。

eg: 
/** 兼容与支持 */
-webkit-transition-timing-function: ease;
		transition-timing-function: ease, linear;

---

指定过渡效果的延迟时间 - transition-delay

多个不同的过渡效果时，可以分别指定过渡效果的延迟时间，以逗号隔开。
当多个值的多于所有过渡属性的数量时，那么只有相应过渡属性数量的值会生效。
当多个值的少于所有过渡属性的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有过渡效果重复应用该值，即共用相同的延迟时间。

transition-delay 可能的值	描述
time	指定过渡效果何时开始。允许负值。（以秒或毫秒计）。
0	默认值。意味着不会有延迟效果。

eg: 
/** 兼容与支持 */
-webkit-transition-delay  : 1000ms;
		transition-delay  : 1000ms, 1s;

---

过渡简写 - transition

CSS可以使用过渡简写 - transition，用于一次性集中定义各种过渡效果。

属性	描述
transition-delay	指定过渡效果何时开始。默认是 0。
transition-duration	指定过渡效果花费的时间。默认是 0。
transition-property	指定应用过渡的 CSS 属性的名称。
transition-timing-function	指定过渡效果的时间曲线。默认是 “ease”。

eg:
/** 约定的简写顺序*/
-webkit-transition: [property] [duration] [timing-function] [delay];
		transition: [property] [duration] [timing-function] [delay];	
/**
	在简写的形式下，transition-delay 不会脱离transition-duration单独出现，
	transition-delay总会在transition-duration之后
*/

/** 兼容与支持 */
-webkit-transition: opacity 2000ms ease 1s;
		transition: opacity 2000ms ease 1s;
		
/** 多个css 属性 可以分别指定 过渡效果*/ 				
-webkit-transition: opacity 2000ms ease 1s, height 1s linear 1s;
		transition: opacity 2000ms ease 1s, height 1s linear 1s;					

如果省略某个属性不写，那么将自动取默认值。

---

CSS3的动画支持

CSS3 动画 (animation) 特性支持在网页制作中实现更复杂的样式变化，以及一些交互效果。

指定动画效果名称 - animation-name

指定应用多个不同的动画效果时，以逗号隔开。

animation-name可能的值	描述
none	无动画效果。
keyframename	定义应用动画效果，多个以逗号分隔。

eg: 
/** 兼容与支持 */
-webkit-animation-name: fadeIn;
		animation-name: fadeIn, fadeOut;

---

指定动画效果的持续时间 - animation-duration

多个不同的动画效果时，可以分别指定动画效果的持续时间，以逗号隔开。
当多个值的多于所有动画的数量时，那么只有相应动画数量的值会生效。
当多个值的少于所有动画的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有动画效果重复应用该值，即共用相同的持续时间。

animation-duration可能的值	描述
time	指定动画效果花费的时间。（以秒或毫秒计）。
0	默认值。意味着不会有过渡效果。

eg: 
/** 兼容与支持 */
-webkit-animation-duration: 1000ms;
		animation-duration: 1000ms, 1s;

---

指定动画效果的时间曲线 - animation-timing-function

多个不同的动画效果时，可以分别指定动画效果的时间曲线，以逗号隔开。
当多个值的多于所有动画的数量时，那么只有相应动画数量的值会生效。
当多个值的少于所有动画的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有动画效果重复应用该值，即共用相同的时间曲线。

animation-timing-function可能的值	描述
linear	规定以相同速度开始至结束的过渡效果。
ease	默认值。规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in	规定以慢速开始的过渡效果。
ease-out	规定以慢速结束的过渡效果。
ease-in-out	规定以慢速开始和结束的过渡效果。

eg: 
/** 兼容与支持 */
-webkit-animation-timing-function: ease;
		animation-timing-function: ease, linear;

---

指定动画效果的延迟时间 - animation-delay

多个不同的动画效果时，可以分别指定动画效果的延迟时间，以逗号隔开。
当多个值的多于所有动画的数量时，那么只有相应动画数量的值会生效。
当多个值的少于所有动画的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有动画效果重复应用该值，即共用相同的延迟时间。

animation-delay 可能的值	描述
time	指定动画效果何时开始。允许负值。（以秒或毫秒计）。
0	默认值。意味着不会有延迟效果。

eg: 
/** 兼容与支持 */
-webkit-animation-delay  : 1000ms;
		animation-delay  : 1000ms, 1s;

---

指定动画效果的重复次数 - animation-iteration-count

多个不同的动画效果时，可以分别指定动画效果的重复次数，以逗号隔开。
当多个值的多于所有动画的数量时，那么只有相应动画数量的值会生效。
当多个值的少于所有动画的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有动画效果重复应用该值，即共用相同的重复次数。

animation-iteration-count 可能的值	描述
number	指定动画效果重复次数。
infinite	规定动画应该无限次播放。
1	默认值。定动画效果一次

eg: 
/** 兼容与支持 */
-webkit-animation-iteration-count: 2;
		animation-iteration-count: infinite, 2;

---

指定动画效果循环交替反向效果 - animation-direction

多个不同的动画效果时，可以分别指定动画效果的轮流反向效果，以逗号隔开。
当多个值的多于所有动画的数量时，那么只有相应动画数量的值会生效。
当多个值的少于所有动画的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有动画效果重复应用该值，即共用相同的轮流反向效果。

animation-direction 可能的值	描述
alternate	动画正向双向播放。在奇数次（1、3、5…）正向，在偶数次（2、4、6…）反向播放。
alternate-reverse	动画反向双向播放。在奇数次（1、3、5…）反向，在偶数次（2、4、6…）正向播放。
reverse	动画反向播放。
normal	默认值。动画应该正向播放。

eg: 
/** 兼容与支持 */
-webkit-animation-direction: alternate;
		animation-direction: normal, alternate;

---

指定动画不播放时填充效果 - animation-fill-mode

多个不同的动画时，可以分别指定动画不播放时填充效果，以逗号隔开。
当多个值的多于所有动画的数量时，那么只有相应动画数量的值会生效。
当多个值的少于所有动画的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有动画重复应用该值，即共用相同的动画不播放时填充效果。

动画不播放有两种情形：
1.当动画完成后不播放时
2.当动画有设置延迟时间未开始播放时

animation-fill-mode可能的值	描述
forwards	当动画完成后，填充最后一帧属性值。
backwards	当动画有设置延迟时间未开始播放，填充第一帧属性值。
both	同时应用forwards和backwards。
none	默认值。当动画不播放，不填充任何一帧属性值，仅展示自身的属性值。

动画的第一帧和最后一帧的计算还受 animation-direction 和 animation-iteration-count 的影响

animation-direction	animation-iteration-count	最后一帧
normal	even or odd	100% or to
reverse	even or odd	0% or from
alternate	odd	100% or to
alternate	even	0% or from
alternate-reverse	odd	0% or from
alternate-reverse	even	100% or to

animation-direction	第一帧
normal or alternate	0% or from
reverse or alternate-reverse	00% or to

eg: 
/** 兼容与支持 */
-webkit-animation-fill-mode: backwards;
		animation-fill-mode: forwards, backwards;

---

指定动画效果运行状态 - animation-play-state

多个不同的动画效果时，可以分别指定动画效果的运行状态，以逗号隔开。
当多个值的多于所有动画的数量时，那么只有相应动画数量的值会生效。
当多个值的少于所有动画的数量时，那么这多个值会作为整体重复。
当只有一个值时，表示所有动画效果重复应用该值，即共用相同的运行状态 。

animation-play-state可能的值	描述
paused	动画暂停。
running	默认值。动画运行播放。

eg: 
/** 兼容与支持 */
-webkit-animation-play-state: paused;
		animation-play-state: paused, running;

---

动画简写 - animation

CSS可以使用动画简写 - animation，用于一次性集中定义各种动画效果。

属性	描述
animation-delay	指定动画效果何时开始。默认是 0。
animation-duration	指定动画效果花费的时间。默认是 0。
animation-property	指定应用动画的 CSS 属性的名称。
animation-timing-function	指定动画效果的时间曲线。默认是 “ease”。
animation-fill-mode	指定动画不播放时填充效果
animation-play-state	指定动画效果运行状态

eg:
/** 约定的简写顺序*/
-webkit-animation: [name] [duration] [timing-function] [delay] [fill-mode] [play-state];
		animation: [name] [duration] [timing-function] [delay] [fill-mode] [play-state];	
/**
	在简写的形式下，animation-delay 不会脱离animation-duration单独出现，
	animation-delay总会在animation-duration之后
*/

/** 兼容与支持 */
-webkit-animation: opacity 2000ms ease 1s forwards;
		animation: opacity 2000ms ease 1s forwards;
		
/** 多个css 属性 可以分别指定 过渡效果*/ 				
-webkit-animation: opacity 2000ms ease 1s forwards, height 1s linear 1s backwards;
		animation: opacity 2000ms ease 1s forwards, height 1s linear 1s, backwards;					

如果省略某个属性不写，那么将自动取默认值。

---

CSS 知识题

问题	答案
width 和 height 完全支持 transition	width:auto; 不支持 transition
magin-left：100% 和 translateX(100%) 偏移效果是一样的	translate 百分比值是基于元素本身宽高。magin 百分比是基于其父对象的宽高。
文本流竖直向左	display:flex;flex-flow: column wrap-reverse;(每个文字用标签包裹，通过height 使文本流换行。)

	opacity:0	visibility:hidden	display:none
是否占据页面空间	占据	占据	不占据
子元素设置该属性其他值是否可以继续显示	不可以	可以	不可以
自身绑定的时间是否能继续触发	能触发	不能触发	不能触发
是否影响遮挡的元素触发事件	影响	不影响	不影响
属性值改变是否产生回流（reflow）	不产生	不产生	产生
属性值改变是否产生回流（repaint）	不一定产生	产生	产生
该属性是否支持transition	支持	不支持	不支持