CSS 动画 and 过渡

1. CSS 动画 and 过渡Introduction

CSS动画 and 过渡 is CSS3引入 important features, 用于creation平滑, 流畅 视觉效果, 增强user体验. 它们可以使元素 in 不同status之间平滑过渡, or 者creation complex 动画效果, 而不需要usingJavaScript.

1.1 过渡 and 动画 区别

2. CSS 过渡 (Transition)

CSS过渡 is 指元素 from 一个status平滑过渡 to 另一个status 过程. 它可以application于元素 任何可动画property, such as颜色, 尺寸, 位置, 旋转etc..

2.1 过渡 basic语法

过渡效果throughtransitionpropertyimplementation, 它 is a 简写property, 可以同时设置 many 个过渡property.

/* 语法: transition: property duration timing-function delay; */

/* 单个property过渡 */
.element {
    transition: width 0.3s ease 0s;
}

/*  many 个property过渡 */
.element {
    transition: width 0.3s ease 0s, height 0.5s ease 0.2s;
}

/* 所 has property过渡 */
.element {
    transition: all 0.3s ease 0s;
}

2.2 过渡 property

transitionproperty可以分解 for 以 under 几个子property:

2.2.1 transition-property

指定要过渡 CSSproperty名称. 可以 is 单个property名, many 个property名 (用逗号分隔) or all (表示所 has 可过渡 property) .

/* 单个property */
.element {
    transition-property: width;
}

/*  many 个property */
.element {
    transition-property: width, height, background-color;
}

/* 所 has property */
.element {
    transition-property: all;
}

2.2.2 transition-duration

指定过渡效果 持续时间, 单位 for 秒 (s) or 毫秒 (ms) .

/* 秒 */
.element {
    transition-duration: 0.3s;
}

/* 毫秒 */
.element {
    transition-duration: 300ms;
}

2.2.3 transition-timing-function

指定过渡效果 时间function, 用于控制过渡 速度变化. 常用 值including:

• ease: 默认值, slow - fast - slow
• linear: 匀速
• ease-in: slow 进
• ease-out: slow 出
• ease-in-out: slow 进 slow 出
• cubic-bezier(n,n,n,n): 自定义贝塞尔曲线

/* 不同 时间function */
.element-ease {
    transition-timing-function: ease;
}

.element-linear {
    transition-timing-function: linear;
}

.element-ease-in {
    transition-timing-function: ease-in;
}

.element-ease-out {
    transition-timing-function: ease-out;
}

.element-ease-in-out {
    transition-timing-function: ease-in-out;
}

.element-cubic {
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

2.2.4 transition-delay

指定过渡效果 latency时间, 单位 for 秒 (s) or 毫秒 (ms) .

/* latency0.2秒开始过渡 */
.element {
    transition-delay: 0.2s;
}

2.3 过渡 触发方式

过渡效果需要throughevent触发, common 触发方式including:

• :hover: 鼠标悬停时
• :focus: 元素获得焦点时
• :active: 元素被激活时 (such as鼠标点击时)
• :checked: 表单元素被选in时
• :target: 元素被锚点定位时
• JavaScriptevent: throughJavaScript添加 or 移除class名时

2.4 过渡example

.transition-box {
    width: 100px;
    height: 100px;
    background-color: #4285F4;
    transition: all 0.3s ease;
}

.transition-box:hover {
    width: 150px;
    height: 150px;
    background-color: #34A853;
    transform: rotate(45deg);
}

3. CSS 变换 (Transform)

CSS变换 is 指 for 元素for平移, 旋转, 缩放, 倾斜etc.operation, 改变元素 out 观 and 位置. 变换效果通常 and 过渡 or 动画结合using, creation更丰富 视觉效果.

3.1 变换 basic语法

变换效果throughtransformpropertyimplementation, 可以同时application many 个变换function.

/* 单个变换 */
.element {
    transform: translate(20px, 10px);
}

/*  many 个变换 (顺序 important )  */
.element {
    transform: translate(20px, 10px) rotate(45deg) scale(1.2);
}

3.2 常用 变换function

3.2.1 translate(): 平移

用于将元素 in 水平 and 垂直方向 on 平移.

/* 语法: translate(tx, ty)  or  translateX(tx)  or  translateY(ty) */

/* 水平 and 垂直方向同时平移 */
.element {
    transform: translate(20px, 10px);
}

/* 仅水平方向平移 */
.element {
    transform: translateX(20px);
}

/* 仅垂直方向平移 */
.element {
    transform: translateY(10px);
}

3.2.2 rotate(): 旋转

用于将元素绕着指定 点旋转, 单位 for 度 (deg) .

/* 语法: rotate(angle) */

/* 顺时针旋转45度 */
.element {
    transform: rotate(45deg);
}

/* 逆时针旋转30度 */
.element {
    transform: rotate(-30deg);
}

3.2.3 scale(): 缩放

用于缩放元素 big small .

/* 语法: scale(sx, sy)  or  scale(s)  or  scaleX(sx)  or  scaleY(sy) */

/* 水平 and 垂直方向同时缩放 */
.element {
    transform: scale(1.5); /* 放 big 1.5倍 */
    transform: scale(0.8); /* 缩 small  to 0.8倍 */
    transform: scale(1.5, 0.8); /* 水平放 big 1.5倍, 垂直缩 small  to 0.8倍 */
}

/* 仅水平方向缩放 */
.element {
    transform: scaleX(1.5);
}

/* 仅垂直方向缩放 */
.element {
    transform: scaleY(0.8);
}

3.2.4 skew(): 倾斜

用于使元素 in 水平 and 垂直方向 on 倾斜.

/* 语法: skew(ax, ay)  or  skewX(ax)  or  skewY(ay) */

/* 水平 and 垂直方向同时倾斜 */
.element {
    transform: skew(20deg, 10deg);
}

/* 仅水平方向倾斜 */
.element {
    transform: skewX(20deg);
}

/* 仅垂直方向倾斜 */
.element {
    transform: skewY(10deg);
}

3.2.5 matrix(): 矩阵变换

用于定义复合变换, through矩阵形式表示.

/* 语法: matrix(a, b, c, d, tx, ty) */
.element {
    transform: matrix(1, 0, 0, 1, 20, 10); /* etc.同于translate(20px, 10px) */
}

3.2.6 transform-origin: 变换原点

用于指定变换 原点, 默认 is 元素 in心 (50% 50%) .

/* 语法: transform-origin: x y z; */

/*  left  on 角 for 原点 */
.element {
    transform-origin: 0 0;
}

/*  right  on 角 for 原点 */
.element {
    transform-origin: 100% 0;
}

/* 底部in心 for 原点 */
.element {
    transform-origin: center bottom;
}

/* 自定义原点 */
.element {
    transform-origin: 20px 30px;
}

3.3 变换example

/* 平移example */
.transform-translate:hover {
    transform: translate(20px, 10px);
}

/* 旋转example */
.transform-rotate:hover {
    transform: rotate(45deg);
}

/* 缩放example */
.transform-scale:hover {
    transform: scale(1.5);
}

/* 倾斜example */
.transform-skew:hover {
    transform: skew(20deg, 10deg);
}

/* 组合变换example */
.transform-combined:hover {
    transform: translate(20px, 10px) rotate(45deg) scale(1.2);
}

4. CSS 动画 (Animation)

CSS动画 is 指through定义 many 个关键帧, 使元素 from 一个status平滑过渡 to 另一个status 过程. 动画可以自动触发, 也可以throughevent触发, 并且可以控制动画 播放次数, 方向, 速度etc..

4.1 动画 basic语法

CSS动画需要两个部分:

1. @keyframes规则: 定义动画 关键帧
2. animationproperty: 将动画application to 元素 on

4.1.1 @keyframes规则

@keyframes规则用于定义动画 关键帧, 即动画 in 不同时间点 status.

/* 语法: @keyframes animation-name { keyframes-selector { css-styles; } } */

/*  simple 动画, 只 has 开始 and 结束status */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*  complex 动画,  many 个关键帧 */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

4.1.2 animationproperty

animationproperty用于将动画application to 元素 on , 它 is a 简写property, 可以同时设置 many 个动画property.

/* 语法: animation: name duration timing-function delay iteration-count direction fill-mode play-state; */

/* basic动画 */
.element {
    animation: fadeIn 2s ease 0s 1 normal forwards run;
}

/* 无限循环动画 */
.element {
    animation: bounce 2s ease 0s infinite normal forwards run;
}

4.2 动画 property

animationproperty可以分解 for 以 under 几个子property:

4.2.1 animation-name

指定要application 动画名称, and @keyframes规则in定义 名称一致.

.element {
    animation-name: fadeIn;
}

4.2.2 animation-duration

指定动画 持续时间, 单位 for 秒 (s) or 毫秒 (ms) .

.element {
    animation-duration: 2s;
}

4.2.3 animation-timing-function

指定动画 时间function, and transition-timing-function相同.

.element {
    animation-timing-function: ease-in-out;
}

4.2.4 animation-delay

指定动画开始 before latency时间, 单位 for 秒 (s) or 毫秒 (ms) .

.element {
    animation-delay: 0.5s;
}

4.2.5 animation-iteration-count

指定动画 播放次数, 可以 is 具体 number or infinite (无限循环) .

/* 播放3次 */
.element {
    animation-iteration-count: 3;
}

/* 无限循环 */
.element {
    animation-iteration-count: infinite;
}

4.2.6 animation-direction

指定动画 播放方向, 常用 值including:

• normal: 默认值, 正常播放 ( from from to to)
• reverse: 反向播放 ( from to to from)
• alternate: 交替播放, 奇数次正常播放, 偶数次反向播放
• alternate-reverse: 反向交替播放, 奇数次反向播放, 偶数次正常播放

/* 交替播放 */
.element {
    animation-direction: alternate;
}

4.2.7 animation-fill-mode

指定动画结束 after 元素 status, 常用 值including:

• none: 默认值, 动画结束 after restore to 初始status
• forwards: 动画结束 after 保持 in 最 after 一个关键帧 status
• backwards: 动画开始 before application第一个关键帧 status
• both: 同时applicationforwards and backwards 效果

/* 动画结束 after 保持最 after 一个关键帧 status */
.element {
    animation-fill-mode: forwards;
}

4.2.8 animation-play-state

指定动画 播放status, 常用 值including:

• run: 默认值, 动画正 in 播放
• paused: 动画已暂停

/* 暂停动画 */
.element {
    animation-play-state: paused;
}

4.3 动画example

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 滑入动画 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* 旋转动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* 弹跳动画 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* 颜色变化动画 */
@keyframes colorChange {
    0% {
        background-color: #4285F4;
    }
    33% {
        background-color: #34A853;
    }
    66% {
        background-color: #FBBC05;
    }
    100% {
        background-color: #EA4335;
    }
}

/* application动画 */
.animation-fadeIn {
    animation: fadeIn 2s ease-in-out;
}

.animation-rotate {
    animation: rotate 2s linear infinite;
}

.animation-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.animation-bounce {
    animation: bounce 2s ease-in-out infinite;
}

.animation-colorChange {
    animation: colorChange 3s ease-in-out infinite;
}

5. 动画 and 过渡 performanceoptimization

虽然CSS动画 and 过渡可以creation丰富 视觉效果, 但such as果using不当, 可能会影响页面 performance. 以 under is 一些performanceoptimization建议:

5.1 usingtransform and opacityproperty

尽量usingtransform and opacityproperty来creation动画, 因 for 这两个property可以由GPU加速, performance更 good . 避免using会导致重排 (reflow) property, such aswidth, height, top, leftetc..

5.2 usingwill-changeproperty

usingwill-changeproperty可以提 before 告知浏览器哪些property将要发生变化, 让浏览器提 before 做 good optimization准备.

.element {
    will-change: transform, opacity;
}

5.3 避免using complex 动画

尽量避免using过于 complex 动画, 特别 is in move设备 on , complex 动画可能会导致卡顿.

5.4 using硬件加速

可以through以 under 方式触发硬件加速:

• usingtransform: translateZ(0) or transform: translate3d(0, 0, 0)
• usingperspectiveproperty
• usingbackface-visibility: hidden

.element {
    transform: translateZ(0);
    /*  or  */
    transform: translate3d(0, 0, 0);
    /*  or  */
    perspective: 1000px;
    /*  or  */
    backface-visibility: hidden;
}

5.5 合理using动画 播放次数

尽量避免using无限循环 动画, 特别 is in 页面 on has many 个动画元素时, 可能会导致performanceissues.

6. 动画 and 过渡 application场景

CSS动画 and 过渡可以application于各种场景, 以 under is 一些common applicationexample:

6.1 导航菜单

for 导航菜单添加悬停效果, 提升user体验.

.nav-item {
    transition: all 0.3s ease;
}

.nav-item:hover {
    transform: translateY(-3px);
    color: #4285F4;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

6.2 按钮交互

for 按钮添加点击 and 悬停效果, 增强交互反馈.

.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(66, 133, 244, 0.4);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(66, 133, 244, 0.3);
}

6.3 graph片画廊

for graph片画廊添加过渡效果, 提升浏览体验.

.gallery-item {
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
    transition: all 0.3s ease;
}

.gallery-item:hover img {
    opacity: 0.8;
}

6.4 加载动画

for 页面 or component添加加载动画, 提升user体验.

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #4285F4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

6.5 页面过渡

for 页面切换添加过渡效果, 提升user体验.

.page {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page.active {
    opacity: 1;
}

7. 练习