我很早学过，只是当时没有系统记录笔记，导致过一段时就容易忘记很多东西。本笔记主要参考 CSS 基础&进阶-千古前端图文教程，W3C School - CSS，MDN web docs - CSS

Selectors 选择器

Basic selectors

Universal selector

Syntax: *

Type selector

Syntax: elementname

Class selector

Syntax: .classname

ID selector

Syntax: #idname

Attribute selector

Syntax: [attr]、[attr=value]、[attr~=value]、[attr|=value]、[attr^=value]、[attr$=value]、[attr*=value]

Grouping selectors

Selector list

Syntax: A, B

Child combinator

Syntax: A > B

General sibling combinator

Syntax: A ~ B

Adjacent sibling combinator

Syntax: A + B

Value 值

max-content

The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows. 人话说就是内容的最大宽度。

Property 属性

background

This property is a shorthand for the following CSS properties:

1
2
3
4
5
6
7
8
background-color: <color>;
background-image: none | <url>;
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
background-position: center center | top left | top center | top right | center left | center right | bottom left | bottom center | bottom right | <percentage> <percentage> | <length> <length>;
background-size: auto | cover | contain | <percentage> <percentage> | <length> <length> | <length> auto | auto <length> | <length>;
background-attachment: scroll | fixed | local;
background-clip: border-box | padding-box | content-box;
background-origin: border-box | padding-box | content-box;

Syntax: background: [color] [image] [repeat] [attachment] [position] / [size] [origin] [clip];

Example: background: #f1f1f1 url("img_hotgirl.png") no-repeat right top / 150px 100px content-box border-box;

inset

The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.

transform-origin

The transform-origin CSS property sets the origin for an element's transformations.

默认情况下，转换的原点是center.

Syntax:

x-offset/x-offset-keyword | y-offset/y-offset-keyword | z-offset/z-offset-keyword

1
2
3
transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px;

text-align

The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in a horizontal direction.

1
2
3
4
text-align: start;
text-align: center;
text-align: end;
text-align: justify; /* 两端对齐 */

text-transform

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

1
2
3
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;

zoom

它在改变元素大小的同时，也会改变其占位大小，这可以和 scale 区别开来。但 MDN文档 显示此特性是非标准，所以还是建议使用scale。

gap

Flex和Grid布局都适用

By Tags

Textarea

resize

可以用resize来控制 textarea 的缩放行为。

1
2
3
textarea {
  resize: vertical;
}

ul, ol, li

list-style-position

控制 li 左侧的点的位置，下面的是用来让点点显示在内容区域内部。

1
2
3
ul, ol {
	list-style-position: inside;
}

Pseudo-classes 伪类

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

:focus

The :focus represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

Pseudo-elements 伪元素

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

::after

::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content（装饰性内容）to an element with the content property. It is inline by default.

比如下例就是给一段文字右侧加上一个好的标志：

1
2
3
4
.good-text::after {
  content: " <- GOOD!";
  color: green;
}

::before

同上，一般常见用法是在链接前加上一个🔗符号。

At-rules @

@media

The @media rule is used in media queries to apply different styles for different media types/devices.

1
2
3
4
5
6
@media screen and (min-width: 900px) {
  ...;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
  ...;
}

Units 单位

rem, em

em and rem are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text.

The em unit means "my parent element's font-size". Each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

The rem unit means "The root element's font-size". This means that each successive level of nesting does not keep getting larger.

However, if you change the <html> element's font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

简而言之，em 是父亲元素的相对大小，rem 是根结点元素的相对大小。

fr

这个单位专门为 grid 设计。The new fr unit represents a fraction of the available space in the grid container.

The following grid definition would create three equal-width tracks that grow and shrink according to the available space.

1
2
3
4
5
6
7
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
1
2
3
4
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Flex

Flex Container

The flex container becomes flexible by setting the display property to flex:

Example:

1
2
3
.flex-container {
  display: flex;
}

The flex container properties are:

PropertyDescription
flex-directionSpecifies the direction of the flexible items inside a flex container
flex-wrapSpecifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
flex-flowA shorthand property for flex-direction and flex-wrap
justify-contentHorizontally aligns the flex items when the items do not use all available space on the main-axis
align-itemsVertically aligns the flex items when the items do not use all available space on the cross-axis
align-contentModifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
displaySpecifies the type of box used for an HTML element

Property: flex-direction

The flex-direction property defines in which direction the container wants to stack（堆叠） the flex items.

Value: column

The column value stacks the flex items vertically (from top to bottom)

1
2
3
4
.flex-container {
  display: flex;
  flex-direction: column;
}

Value: column-reverse

The column-reverse value stacks the flex items vertically (but from bottom to top)

Value: row (default)

The row value stacks the flex items horizontally (from left to right)

Value: row-reverse

The row-reverse value stacks the flex items horizontally (but from right to left)

Property: flex-wrap

The flex-wrap property specifies whether the flex items should wrap or not.

Value: wrap

The wrap value specifies that the flex items will wrap if necessary:

1
2
3
4
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Value: nowrap (default)

The nowrap value specifies that the flex items will not wrap (this is default)

Value: wrap-reverse

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order.

Property: flex-flow

The flex-flow property is a shorthand（速记，简单表达方式） property for setting both the flex-direction and flex-wrap properties.

Example:

1
2
3
4
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Property: justify-content

The justify-content property is used to align the flex items horizontally.

Value: center

The center value aligns the flex items at the center of the container:

1
2
3
4
.flex-container {
  display: flex;
  justify-content: center;
}

Value: flex-start (default)

The flex-start value aligns the flex items at the beginning of the container (this is default)

Value: flex-end

The flex-end value aligns the flex items at the end of the container

Value: space-around

The space-around value displays the flex items with space before, between, and after the lines.

Value: space-between

The space-between value displays the flex items with space between the lines.

Property: align-items

The align-items property is used to align（对齐，使成一条线） the flex items vertically.

Value: center

The center value aligns the flex items in the middle of the container:

1
2
3
4
5
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

在 Flex 容器里的图片尺寸会有点拉伸，加上align-items: center;即可

Value: flex-start

The flex-start value aligns the flex items at the top of the container.

Value: flex-end

The flex-end value aligns the flex items at the bottom of the container.

Value: stretch

The stretch value stretches the flex items to fill the container (this is default). If you set it a height, it won't fill the container.

Value: baseline

The baseline value aligns the flex items such as their baselines aligns.

Property: align-content

The align-content property is used to align the flex lines.

Value: space-between

The space-between value displays the flex lines with equal space between them:

1
2
3
4
5
6
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Value: space-around

The space-around value displays the flex lines with space before, between, and after them.

Value: stretch

The stretch value stretches the flex lines to take up the remaining space (this is default).

Value: center

The center value displays display the flex lines in the middle of the container.

Value: flex-start

The flex-start value displays the flex lines at the start of the container.

Value: flex-end

The flex-end value displays the flex lines at the end of the container.

Flex Items

The following table lists all the CSS Flexbox Items properties:

PropertyDescription
orderSpecifies the order of the flex items inside the same container
flex-growSpecifies how much a flex item will grow relative to the rest of the flex items inside the same container
flex-shrinkSpecifies how much a flex item will shrink relative to the rest of the flex items inside the same container
flex-basisSpecifies the initial length of a flex item
flexA shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
align-selfSpecifies the alignment for a flex item (overrides the flex container's align-items property)

Property: order

The order property specifies the order of the flex items.

The order value must be a number, default value is 0.

Example:

The order property can change the order of the flex items:

1
2
3
4
5
6
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

Property: flex-grow

场景举例：最后一个元素想占剩余所有位置，可设置成 1

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.（相当于给 item 加上宽度权重，权重越大，宽度等比变大）

The value must be a number, default value is 0.（inc. percentage）

Example:

Make the third flex item grow eight times faster than the other flex items:

1
2
3
4
5
<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

Property: flex-shrink

场景举例：视窗变窄了，但某元素不想缩窄，可设置成 0

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

The value must be a number, default value is 1.

Example:

Do not let the third flex item shrink as much as the other flex items:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Property: flex-basis

The flex-basis property specifies the initial length of a flex item.（这只是初始长度，但随着 items 变多，宽度也会受到一定压缩）

Example:

Set the initial length of the third flex item to 200 pixels:

1
2
3
4
5
6
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Property: flex

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

Example:

Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:（不伸长，也不缩短，始终保持 200px 的宽度）

1
2
3
4
5
6
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Property: align-self

The align-self property specifies the alignment for the selected item inside the flexible container.（针对某个 item，而不是全部）

The align-self property overrides the default alignment set by the container's align-items property.

Example:

Align the third flex item in the middle of the container:

1
2
3
4
5
6
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Flex Responsive 弹性响应

For example, if you want to create a two-column layout for most screen sizes, and a one-column layout for small screen sizes (such as phones and tablets), you can change the flex-direction from row to column at a specific breakpoint (800px in the example below):

Example:

1
2
3
4
5
6
7
8
9
10
11
.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex-wrap: wrap; on the flex container for this example to work:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right,
  .flex-item-left {
    flex: 100%;
  }
}

Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

All CSS Grid Properties:

PropertyDescription
column-gapSpecifies the gap between the columns
gapA shorthand property for the row-gap and the column-gap properties
gridA shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-areaEither specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columnsSpecifies a default column size
grid-auto-flowSpecifies how auto-placed items are inserted in the grid
grid-auto-rowsSpecifies a default row size
grid-columnA shorthand property for the grid-column-start and the grid-column-end properties
grid-column-endSpecifies where to end the grid item
grid-column-gapSpecifies the size of the gap between columns
grid-column-startSpecifies where to start the grid item
grid-gapA shorthand property for the grid-row-gap and grid-column-gap properties
grid-rowA shorthand property for the grid-row-start and the grid-row-end properties
grid-row-endSpecifies where to end the grid item
grid-row-gapSpecifies the size of the gap between rows
grid-row-startSpecifies where to start the grid item
grid-templateA shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areasSpecifies how to display columns and rows, using named grid items
grid-template-columnsSpecifies the size of the columns, and how many columns in a grid layout
grid-template-rowsSpecifies the size of the rows in a grid layout
row-gapSpecifies the gap between the grid rows

Grid Intro

A grid layout consists of a parent element, with one or more child elements. And all direct children of the grid container automatically become grid items.

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

Example:

1
2
3
4
.grid-container {
  /*display: grid;*/
  display: inline-grid;
}

Properties: row-gap, column-gap, gap

Rows: The horizontal lines of grid items.

Columns: The vertical lines of grid items.

Gaps: The spaces between each column/row.

You can adjust the gap size by using one of the following properties:

  • row-gap
  • column-gap
  • gap: shorthand property for the row-gap and the column-gap properties

Example:

1
2
3
4
5
6
7
8
9
10
11
12
.grid-container1 {
  display: grid;
  row-gap: 50px;
}
.grid-container2 {
  display: grid;
  column-gap: 50px;
}
.grid-container3 {
  display: grid;
  gap: 50px 100px;
}

Properties: grid-row-start, grid-row-end, grid-column-start, grid-column-end

Row lines: The lines between rows.

Column lines: The lines between columns.

Refer to line numbers when placing a grid item in a grid container.

Example:

Place a grid item at row line 1 and column line 1, and let it end on row line 3 and column line 3:

1
2
3
4
5
6
.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}

Grid Container

Property: grid-template-columns

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.（定义 多少列 + 各列宽度）

The value is a space-separated-list（以空格分隔的列表）, where each value defines the width of the respective column.

Example:

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or auto if all columns should have the same width.

1
2
3
4
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Note: If you have more than 4 items in a 4 columns grid, the grid will automatically add a new row to put the items in.

The grid-template-columns property can also be used to specify the size (width) of the columns.

Example:

1
2
3
4
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Property: grid-template-rows

The grid-template-rows property defines the height of each row.

The value is a space-separated-list, where each value defines the height of the respective row:

Example:

1
2
3
4
.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Property: justify-content

The justify-content property is used to align the whole grid inside the container horizontally.

Note: The grid's total width has to be less than the container's width for the justify-content property to have any effect.

Value: space-evenly

The value space-evenly will give the columns equal amount of space between, and around them.

Example:

1
2
3
4
.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Value: space-around

The value space-around will give the columns equal amount of space around them.

Value: space-between

The value space-between will give the columns equal amount of space between them.

Value: center

The value center will align the grid in the middle of the container.

Value: start

The value start will align the grid at the beginning of the container.

Value: end

The value end will align the grid at the end of the container.

Property: align-content

The align-content property is used to align the whole grid inside the container vertically.

Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.

Value: space-evenly

Value: space-around

Value: space-between

Value: center

Value: start

Value: end

Property: grid-auto-rows

It can specifies a default row size.

1
2
grid-auto-rows: minmax(50px, auto);
grid-auto-rows: 50px;

Note: minmax(min, max) 是 CSS Grid 布局中的一个函数，它可以让我们设置一个长度范围，这个函数可以用于定义网格项目的大小，尤其是在我们不知道网格项目具体大小时非常有用。

Property: grid-auto-columns

同上

Grid Item

Property: grid-row

The grid-row property defines on which row to place an item.

The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many rows the item will span:

Example:

Make "item1" start on row-line 1 and end on row-line 4:

1
2
3
.item1 {
  grid-row: 1 / 4;
}

Make "item1" start on row 1 and span 2 rows:

1
2
3
.item1 {
  grid-row: 1 / span 2;
}

Property: grid-column

The grid-column property defines on which column(s) to place an item.

The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span.

Example:

Make "item1" start on column 1 and end before column 5:

1
2
3
.item1 {
  grid-column: 1 / 5;
}

Make "item1" start on column 1 and span 3 columns:

1
2
3
.item1 {
  grid-column: 1 / span 3;
}

⭐Property: grid-area

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Example:

Make "item8" start on row-line 1 and column-line 2, and end on row-line 5 and column line 6:

1
2
3
.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Make "item8" start on row-line 2 and column-line 1, and span 2 rows and 3 columns:

1
2
3
.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Property: grid-template-areas

The grid-area property can also be used to assign names to grid items.

Example:

Item1 gets the name "myArea" and spans all five columns in a five columns grid layout:

1
2
3
4
5
6
.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: "myArea myArea myArea myArea myArea";
}

Let "myArea" span two columns in a five columns grid layout:

1
2
3
4
5
6
.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: "myArea myArea . . .";
}

Note: A period sign represents a grid item with no name.

To define two rows, define the column of the second row inside another set of apostrophes（撇号）:

1
2
3
.grid-container {
  grid-template-areas: "myArea myArea . . ." "myArea myArea . . .";
}

Name all items, and make a ready-to-use webpage template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.item1 {
  grid-area: header;
}
.item2 {
  grid-area: menu;
}
.item3 {
  grid-area: main;
}
.item4 {
  grid-area: right;
}
.item5 {
  grid-area: footer;
}

.grid-container {
  grid-template-areas:
    "header header header header right right"
    "menu main main main right right"
    "menu footer footer footer footer footer";
}

由此可知，grid-template-areas可以用于形象化显示每个 item 的占位

Animations

An animation lets an element gradually change from one style to another.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

@keyframes、animation-name、animation-duration

To get an animation to work, you must bind the animation to an element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

It's also possible to use percent:

1
2
3
4
5
6
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

If you like to add more than one style:

1
2
3
4
5
6
7
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

Property: animation-delay

The animation-delay property specifies a delay for the start of an animation.

1
2
3
4
5
6
7
8
9
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds. 一般没有人会用负数吧，好不容易写好的动画，你搁这直接跳过几秒？

Property: animation-iteration-count

The animation-iteration-count property specifies the number of times an animation should run.

1
2
3
4
5
6
7
8
9
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

You can also use the value "infinite" to make the animation continue forever.

1
2
3
4
5
div {
  ...
  animation-iteration-count: infinite;
  ...
}

Property: animation-direction

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:

  • normal - The animation is played as normal (forwards). This is default
  • reverse - The animation is played in reverse direction (backwards)
  • alternate- The animation is played forwards first, then backwards
  • alternate-reverse - The animation is played backwards first, then forwards
1
2
3
4
5
div {
  ...
  animation-direction: reverse;
  ...
}

Property: animation-timing-function

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

  • ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear - Specifies an animation with the same speed from start to end
  • ease-in - Specifies an animation with a slow start
  • ease-out - Specifies an animation with a slow end
  • ease-in-out - Specifies an animation with a slow start and end
  • cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function
1
2
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}

Property: animation-fill-mode

animation-fill-mode 将指定目标元素在动画播放前/后/两者都保持的样式。

The animation-fill-mode property can have the following values:

  • none - Default value. Animation will not apply any styles to the element before or after it is executing
  • forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
  • backwards - The element will get the style values that are set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
  • both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

下面例子指的是 div 元素保持动画后的样式：

1
2
3
4
5
div {
  ...
  animation-fill-mode: forwards;
  ...
}

Animation Shorthand Property

1
2
3
4
5
6
7
8
div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

The same animation effect as above can be achieved by using the shorthand animation property:

1
2
3
div {
  animation: example 5s linear 2s infinite alternate;
}

Property: animation-play-state

The animation-play-state CSS property sets whether an animation is running or paused.

1
2
animation-play-state: paused;
animation-play-state: running;

☕欲知后事如何，

且听下回分解🍵