前言：
在网页显示时，有时我们希望点击显示或隐藏某个元素，这时我们可能会想到使用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
网友评论