CSS animatable属性

前言：

在网页显示时，有时我们希望点击显示或隐藏某个元素，这时我们可能会想到使用display: none来实现，但是display: none无法与transition等一起使用，也就是说将无法通过transition等来控制淡入淡出等动画效果。

transition无法应用于只有开关两种状态的属性，例如上述的display: none或block，以及overflow属性

overflow属性介绍
1、其是overflow-x与overflow-y缩写的集合。用于设置若一个元素内的content太大的处理方式，有visible, hidden, scroll, auto等属性值。

可被设置为动画的属性

也即可应用transition等的属性：

Property Type	Transitionable Values
Catch-all	all
Text properties	color
font shorthand	(see individual properties)
font-size	length or percentage
font-size-adjust	number
font-stretch	keywords (in steps)
font-weight	number or keywords (excluding bolder, lighter)
letter-spacing	length
line-height	number or length
max-lines (for overflow)	integer
text-decoration-color	color
text-emphasis-color	color
text-indent	length, percentage, or calc
text-shadow	shadow
text-size-adjust	percentage
vertical-align	keywords, length, or percentage
word-spacing	length or percentage
Box properties	background shorthand
background-color	color
background-image 2	images, gradients
background-position	as repeatable, simple list of percentage, length, or calc
background-size 4	as repeatable, simple list of percentage, length, or calc
border shorthand	(see individual properties)
border-colorshorthand	(see individual properties)
border-top-color etc3	color
border-radiusshorthand	(see individual properties)
border-top-right-radius etc3	length (one or two values)
border-spacing	as simple list of length
border-top etc shorthands3	(see individual properties)
border-widthshorthand	(see individual properties)
border-top-width etc3	length
box-shadow	as shadow list (at risk)
clip	rectangle
crop	rectangle
height, min-height, max-height	length, percentage, or calc
margin	(see individual properties)
margin-top etc3	length
opacity	number
outline-color	color
outline-offset	length
outline-width	length
padding shorthand	(see individual properties)
padding-top etc3	length
width, min-width, max-width	length, percentage, or calc
Positioning properties	top, right, bottom, left
offset-before, offset-end, offset-after, offset-start	length or percentage
visibility 5	visibility
z-index	integer
zoom	number
Multi-column layout properties	columns shorthand
column-count	integer
column-gap	length
column-rule shorthand	(see individual properties)
column-rule-color	color
column-rule-width	length
column-width	length
Flexbox properties	flex shorthand
flex-grow	number (except to/from 0)
flex-shrink	number (except to/from 0)
flex-basis	same as width(length, percentage, or calc)
order	integer
Transforms properties	perspective
perspective-origin	as simple list of length, percentage, or calc
transform	as transform
transform-origin	as simple list of length, percentage, or calc
SVG properties	fill
fill-opacity	float
flood-color	color or keywords
lighting-color	color or keywords
marker-offset	length
stop-color	color
stop-opacity	float
stroke	paint server
stroke-dasharray	list of numbers
stroke-dashoffset	number
stroke-miterlimit	number
stroke-opacity	float
stroke-width	float
viewport-fill	color
viewport-fill-opacity	color

Animation属性设置

可通过animation属性进行设置动画效果。

animation-name: 指定动画名称
animation-duration: 指定动画持续时间
animation-iteration-count: 循环多少次
animation-direction: 可设置为alternate-reverse，即开始反向运动，后续再正向运动。

animation通过keyframes来设置动画不同时间的关键帧, 如0%,25%,50%,75%,100%不同期间的的css属性值是什么。

具体动画效果可参考W3C

兼容性

animation.png