理解CSS | 青训营笔记（2）-阿里云开发者社区

④ 变形过渡动画

过渡

属性值

CSS 中提供了 5 个有关过渡的属性，如下所示：

属性名	属性解释
transition-property	设置元素中参与过渡的属性
transition-duration	设置元素过渡的持续时间
transition-timing-function	设置元素过渡的动画类型
transition-delay	设置过渡效果延迟的时间，默认为 0
transition	简写属性，用于同时设置上面的四个过渡属性。

要成功实现过渡效果，必须定义以下两项内容：

元素中参数与过渡效果的属性；
过渡效果持续的时间。

提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效，因为过渡时间的默认值为 0
 提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效，因为过渡时间的默认值为 0。
 提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效，因为过渡时间的默认值为 0。

1. transition-property

1.1语法:

| transition-property: none || all || property | | ---------------------------------------------------- |

1.2属性值介绍

none：表示没有属性参与过渡效果；
all：表示所有属性都参与过渡效果；
property：定义应用过渡效果的 CSS 属性名称列表，多个属性名称之间使用逗号,进行分隔。

2. transition-duration

2.1语法

transition-duration 属性用来设置过渡需要花费的时间（单位为秒或者毫秒），语法格式如下：

transition-duration: time;

2.2属性值介绍

其中，time 为完成过渡效果需要花费的时间（单位为秒或毫秒），默认值为 0，意味着不会有效果。

如果有多个参与过渡的属性，也可以依次为这些属性设置过渡需要的时间，多个属性之间使用逗号进行分隔，例如transition-duration: 1s, 2s, 3s;。除此之外，也可以使用一个时间来为所有参与过渡的属性设置过渡所需的时间。示例代码如下：

3. transition-timing-function

transition-timing-function 属性用来设置过渡动画的类型，属性的可选值如下：

值	描述
linear	以始终相同的速度完成整个过渡过程，等同于 cubic-bezier(0,0,1,1)
ease	以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程，等同于 cubic-bezier(0.25,0.1,0.25,1)
ease-in	以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1)
ease-out	以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1)
ease-in-out	以慢速开始，并以慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间

4. transition-delay

4.1语法

transition-delay 属性用来设置过渡效果何时开始，属性的语法格式如下：

transition-delay: time;

4.1属性值介绍

其中，参数 time 用来设置在过渡效果开始之前需要等待的时间，单位为秒或毫秒。

5. transition

5.1语法

transition 属性是上面四个属性的简写形式，通过该属性可以同时设置上面的四个属性，属性的语法格式如下：

transition: transition-property transition-duration transition-timing-function transition-delay;

transition 属性中，transition-property 和 transition-duration 为必填参数，transition-timing-function 和 transition-delay 为选填参数，如非必要可以省略不写。另外，通过 transition 属性也可以设置多组过渡效果，每组之间使用逗号进行分隔，

示例代码如下：

css

/*1.元素中参与过渡的属性 2.元素过渡的所需时间 3.元素过渡的动画模式 4. 延时执行的时长 */
 transition: all 2s ease-in 3s;

动画

1.@keyframes 规则

要创建 CSS 动画，您首先需要了解 @keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧，语法格式如下：

css

@keyframes animationName {
     /* 1.from：定义动画的开头，相当于 0%； */
     from {
         /* 2.properties：不同的样式属性名称，例如 color、left、width 等等。 */
         properties: value;
     }
     /* 3.percentage：定义动画的各个阶段，为百分比值，可以添加多个；  */
     percentage {
         properties: value;
     }
     /* 4.to：定义动画的结尾，相当于 100%；*/
     to {
         properties: value;
     }
 }
 // 或者
 /* animationName :表示动画的名称 */
 @keyframes animationName {
     0% {
         properties: value;
     }
     percentage {
         properties: value;
     }
     100% {
         properties: value;
     }
 }

语法说明如下：

animationName：表示动画的名称；
from：定义动画的开头，相当于 0%；
percentage：定义动画的各个阶段，为百分比值，可以添加多个；
to：定义动画的结尾，相当于 100%；
properties：不同的样式属性名称，例如 color、left、width 等等。

2.CSS 中的动画属性

animation-name：设置需要绑定到元素的动画名称；
animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
animation-timing-function：设置动画的速度曲线，默认为 ease；
animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
animation-delay：设置动画开始之前的延迟时间，默认为 0；
animation-iteration-count：设置动画被播放的次数，默认为 1；
animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
animation-play-state：设置动画是正在运行还是暂停，默认是 running；
animation：所有动画属性的简写属性。

animation-name

animation-name 属性用来将动画绑定到指定的 HTML 元素，属性的可选值如下：

值	描述
keyframename	要绑定到 HTML 元素的动画名称，可以同时绑定多个动画，动画名称之间使用逗号进行分隔
none	表示无动画效果

代码如下:

<!DOCTYPE html>
 <html>
 <head>
     <style>
         @keyframes ball {
             0% { top: 0px; left: 0px;}
             25% { top: 0px; left: 350px;}
             50% { top: 200px; left: 350px;}
             75% { top: 200px; left: 0px;}
             100% { top: 0px; left: 0px;} 
         }
         div {
             width: 100px;
             height: 100px;
             border-radius: 50%;
             border: 3px solid black;
             position: relative;
             animation-name: ball;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

animation-duration

animation-duration 属性用来设置动画完成一个周期所需要花费的时间，单位为秒或者毫秒。

animation-duration: 2s;

提示：动画若想成功播放，必须要定义 animation-name 和 animation-duration 属性。

animation-timing-function

animation-timing-function 属性用来设置动画播放的速度曲线，通过速度曲线的设置可以使动画播放的更为平滑。animation-timing-function 属性的可选值如下表所示：

值	描述
linear	动画从开始到结束的速度都是相同的
ease	默认值,动画从低速开始,然后加快,在结束前变慢
ease - in	动画从低速开始
ease - out	动画以低速结束
ease - in - out	动画从低速开始,并且以低速结束
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函数来定义动画的播放速度，参数的取值范围为 0 到 1 之间的数值

代码:

<!DOCTYPE html>
 <html>
 <head>
     <style>
         @keyframes ball {
             0% {left: 0px;}
             50% {left: 350px;}
             100% {left: 0px;}
         }
         div {
             width: 100px;
             height: 100px;
             border-radius: 50%;
             border: 3px solid black;
             text-align: center;
             line-height: 100px;
             position: relative;
             animation-name: ball;
             animation-duration: 2s;
         }
         .one {
             animation-timing-function: ease;
         }
         .two {
             animation-timing-function: ease-in;
         }
         .three {
             animation-timing-function: ease-out;
         }
         .four {
             animation-timing-function: ease-in-out;
         }
     </style>
 </head>
 <body>
     <div class="one">ease</div>
     <div class="two">ease-in</div>
     <div class="three">ease-out</div>
     <div class="four">ease-in-out</div>
 </body>
 </html>

图: animation-timing-function 属性演示

animation-fill-mode

animation-fill-mode 属性用来设置当动画不播放时（开始播放之前或播放结束之后）动画的状态（样式），属性的可选值如下：

值	描述
none	不改变动画的默认行为
forwards	当动画播放完成后，保持动画最后一个关键帧中的样式
backwards	在animation-delay 所指定的时间段内，应用动画第一个关键帧中的样式
both	同时遵循 forwards 和 backwards 的规则

animation-delay

animation-delay 属性用来定义动画开始播放前的延迟时间，单位为秒或者毫秒，属性的语法格式如下：

animation-delay: time;

其中参数 time 就是动画播放前的延迟时间，参数 time 既可以为正值也可以为负值。参数值为正时，表示延迟指定时间开始播放；参数为负时，表示跳过指定时间，并立即播放动画。

css

.one {
             position: absolute;
             top: 0;
             left: 0;
             width: 100px;
             height: 100px;
             border-radius: 50%;
             background-color: rgb(75, 251, 239);
             animation: one 3s ease-in-out infinite;
             animation-delay: 3s;
         }
         .two {
             position: absolute;
             top: 150px;
             left: 150px;
             width: 100px;
             height: 100px;
             border-radius: 50%;
             background-color: rgb(1, 84, 123);
             animation: one 3s ease-in-out infinite;
             animation-delay: -3s;
         }
         @keyframes one {
             0% {
                 left: 0px;
             }
 
             50% {
                 left: 350px;
             }
 
             100% {
                 left: 0px;
             }
         }

animation-iteration-count

animation-iteration-count 属性用来定义动画播放的次数，属性的可选值如下：

值	描述
n	使用具体数值定义动画播放的次数，默认值为 1
infinite	表示动画无限次播放

代码展示:

<div class="one">1</div>
     <div class="two">infinite</div>

@keyframes box {
             0% {
                 transform: rotate(0);
             }
 
             50% {
                 transform: rotate(0.5turn);
             }
 
             100% {
                 transform: rotate(1turn);
             }
         }
         div {
             width: 100px;
             height: 100px;
             float: left;
             border: 3px solid black;
             text-align: center;
             line-height: 100px;
             position: relative;
             animation-name: box;
             animation-duration: 2s;
         }
 
         .one {
             animation-iteration-count: 1;
         }
 
         .two {
             margin-left: 50px;
             animation-iteration-count: infinite;
         }

animation-direction

animation-direction 属性用来设置是否轮流反向播放动画，属性的可选值如下：

值	描述
normal	以正常的方式播放动画
reverse	以相反的方向播放动画
alternate	播放动画时，奇数次（1、3、5 等）正常播放，偶数次（2、4、6 等）反向播放
alternate-reverse	播放动画时，奇数次（1、3、5 等）反向播放，偶数次（2、4、6 等）正常播放

animation-play-state

animation-play-state 属性用来设置动画是播放还是暂停，属性的可选值如下：

值	描述
paused	暂停动画的播放
running	正常播放动画

animation

animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 几个属性的简写形式，通过 animation 属性可以同时定义上述的多个属性，语法格式如下：

arduino

animation: 
 animation-name              /* 动画的名称 */
 animation-duration          /* 动画执行的时长*/
 animation-timing-function   /* 动画执行的模式*/
 animation-delay             /* 延时动画执行*/
 animation-iteration-count   /* 动画执行的周期数*/
 animation-direction         /* 是否轮流反向播放动画 */
 animation-fill-mode         /* 动画暂停时(播放前,播放后)的样式*/
 animation-play-state        /* 设置动画是播放还是暂停*/

性能相关

动画性能相关深入了解

硬件加速详解

⑤ 响应设计

5.1 响应式设计推荐遵循的原则

5.2 媒体查询的使用

CSS 媒体查询是一种可以根据设备类型或屏幕尺寸等特征，为不同的设备或尺寸定义不同的规则和样式表的技术。它允许我们为不同的设备提供定制化的布局，以更好地适应不同的设备和屏幕尺寸。在响应式设计中使用媒体查询非常普遍。

下面是一个基本的 CSS 媒体查询示例：

css

/* 当浏览器宽度小于 768px 时应用这些样式 */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
    background-color: #f1f1f1;
  }
}
/* 当浏览器宽度大于等于 768px 时应用这些样式 */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
    background-color: #fff;
  }
}

上面的代码演示了如何在 CSS 中使用媒体查询。当浏览器宽度小于 768px 时，第一个媒体查询将应用规则集中的样式，而当浏览器宽度大于或等于 768px 时，第二个媒体查询将应用规则集中的样式。注意到每个媒体查询都包含一个媒介类型 "screen" 和一个条件表达式，条件表达式指定了媒体查询应用的范围。

除了浏览器宽度，还可以使用其他常见的媒体特征，如高度、设备方向和分辨率等，以适配不同的设备和屏幕。这些媒体特征可以在 CSS 规范中找到，并可以结合使用来实现更复杂的布局适配。

5.3 设备像素,参考像素移动设备视口

5.3.1 设备像素

5.3.2 DPI && PPI

5.4 css3 像素

5.5 css常用单位

当开发网页时，CSS单位是一项非常重要的知识。下面是一些常见的CSS单位及其解释：

单位名称	含义
px（像素）	一个基本的屏幕上的点，通常用于定义元素的具体大小。
em	相对大小，相对于父元素的字号大小而言。如：font-size: 1.2em; 表示当前元素字号是父亲的1.2倍。
rem	相对大小，与根元素（即 html）的字号大小有关。这个单位不受浏览器 font-size 调节的影响，因此是线性的。
%（百分比）	相对于父元素的宽度/高度而言，可以用于设置元素的宽度、高度、内边距、外边距等。
vw/vh	视口宽度单位（Viewport Width / Viewport Height），视口指窗口显示内容区域的大小。vw表示视口宽度的1/100，vh表示视口高度的1/100。
pt（磅）	印刷单位，1pt=1/72英寸；用于打印样式表中。
mm/cm/in	计量单位，毫米/厘米/英寸，用于打印样式表中。

理解CSS | 青训营笔记（2）

④ 变形 过渡 动画

过渡