HTML5知典 26:86:66

animation

2017-04-22T01:03:46+09:00

animation animation所有动画属性的简写属性，除了 animation-play-state 属性。包括animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-timing-function。 animation-delay animation-delay规定动画何时开始。默认是 0。 animation-direction animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。

animation-delay

2017-04-21T10:37:29+09:00

animation-delay animation-delay规定动画何时开始。默认是 0。即从动画应用在元素上到动画开始的这段时间的长度。代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；

animation-direction

2017-04-21T10:52:58+09:00

animation-direction animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。语法 animation-direction: normal animation-direction: reverse animation-direction: alternate animation-direction: alternate-reverse animation-direction: normal, reverse animation-direction: alternate, reverse, normal

animation-duration

2017-04-21T10:56:30+09:00

animation-duration animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。语法 animation-duration:2s; animation-duration:2ms; 值值描述动画样式应用到元素到元素开始执行动画的时间差。该值可用单位为秒(m)和毫秒(ms)。默认值为0s，表示无动画。

animation-fill-mode

2017-04-22T01:05:18+09:00

animation-fill-mode animation-fill-mode规定对象动画时间之外的状态。语法 animation-fill-mode: none animation-fill-mode: forwards animation-fill-mode: backwards animation-fill-mode: both /* 可以应用多个参数，这个时候使用逗号隔开 */ /* 各个参数应用于与次序相对应的动画名 */ animation-fill-mode: none, backwards animation-fill-mode: both, forwards, none

animation-iteration-count

2017-04-21T11:26:07+09:00

animation-iteration-count animation-iteration-count规定动画被播放的次数。默认是 1。语法 animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.3; animation-iteration-count: 2, 0, infinite;

animation-name

2017-04-21T11:28:31+09:00

animation-name animation-name规定 @keyframes 动画的名称。语法 animation-name: none; animation-name: identifier; 值值描述none特殊关键字，表示无关键帧。identifier动画名称。名称必须符合CSS语法中标识的定义。

animation-play-state

2017-04-21T11:36:33+09:00

animation-play-state animation-play-state规定动画是否正在运行或暂停。默认是 “running”。语法 /* Single animation */ animation-play-state: running; animation-play-state: paused; /* Multiple animations */ animation-play-state: paused, running, running; /* Global values */ animation-play-state: inherited; animation-play-state: initial; animation-play-state: unset;

animation-timing-function

2017-04-21T11:40:16+09:00

animation-timing-function animation-timing-function规定动画的速度曲线。默认是 “ease”。语法 animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier(0…

backface-visibility

2017-04-22T01:06:47+09:00

backface-visibility backface-visibility 属性规定当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。语法 backface-visibility: visible|hidden; 值值描述visible背面是可见的。

keyframes

2017-04-21T10:33:46+09:00

keyframes 动画可以根据帧定制不同的动画效果。语法 @keyframes { [ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]* } 值值描述identifier帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。

perspective

2017-04-22T01:07:27+09:00

perspective perspective 属性规定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。语法 /* Keyword value */ perspective: none; /* values */ perspective: 10px; perspective: 4.5em;

perspective-origin

2017-04-22T01:07:57+09:00

perspective-origin perspective-origin 属性规定 3D 元素所基于的 X 轴和 Y 轴。该属性允许改变 3D 元素的底部位置。当为元素规定 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

动画

2017-04-23T20:39:16+09:00

动画定义动画属性是一些与动画相关的CSS属性，可分为两大类：Transition和Animation。概述 Transition（过渡）为CSS引入了时间轴的概念，当元素指定的CSS属性变化时，该属性的变化不即时完成，而是经过一段时间逐渐的过渡才到达最终需要的值。 Transition的特点在于简单易用，同时也有一定的局限。

transition

2017-04-21T11:58:32+09:00

transition transition 是一个简写属性，可设置 transition-property, transition-duration, transition-timing-function, transition-delay。 transition用来规定元素在两种状态之间的过渡。不同状态可以用:hover 、:active之类的 pseudo-classes 定义，或者使用 JavaScript 动态设置。语法

transition-delay

2017-04-21T12:19:39+09:00

transition-delay transtion-delay规定动画在过渡效果开始等待的时间。值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

transition-duration

2017-04-21T12:12:48+09:00

transition-duration transition-duration 属性以秒或毫秒为单位规定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。语法 /* 值 */ transition-duration: 3s; transition-duration: 60ms; transition-duration: 1s, 5s; transition-duration: 2s, 8s, 16ms; /* 全局值 */ transition-duration: inherit; transition-duration: initial; transition-duration: unset;

transition-property

2017-04-21T12:10:44+09:00

transition-property transition-property 规定应用过渡效果的 CSS 属性的名称。（当规定的 CSS 属性改变时，过渡效果将开始）。语法 /* Keyword values */ transition-property: none; transition-property: all; transition-property: IDENT;

transition-timing-function

2017-04-21T12:17:43+09:00