CSS 动画高级特性与 CSS 同 JavaScript 交互

今日聚焦于 CSS 动画高级特性与 CSS 同 JavaScript 交互的深入学习，并在项目中综合运用这些知识
详细学习内容
（一）CSS 动画高级特性钻研

1. 关键帧动画复杂应用
   多阶段动画构建：学会了在 @keyframes 规则里设定多个关键帧，以此创建更为复杂、细腻的动画效果。比如，制作一个元素先缩小、再旋转、最后放大的动画：
   css
   @keyframes complexAnimation {
   0% {
   transform: scale(1);
   }
   25% {
   transform: scale(0.5);
   }
   50% {
   transform: scale(0.5) rotate(180deg);
   }
   75% {
   transform: scale(0.5) rotate(180deg) translate(50px, 0);
   }
   100% {
   transform: scale(1);
   }
   }

.element {
animation: complexAnimation 5s infinite;
}
动画延迟与持续时间调配：能够精准控制动画的延迟时间与持续时间，实现多个动画的有序播放。例如，让多个元素的动画依次延迟启动：
css
.element1 {
animation: slideIn 2s 0s infinite;
}
.element2 {
animation: slideIn 2s 1s infinite;
}
.element3 {
animation: slideIn 2s 2s infinite;
}

@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
2. 动画组合与控制
多个动画组合：掌握了同时应用多个动画到一个元素上的方法，通过不同动画的叠加创造独特效果。比如，让元素在旋转的同时进行颜色渐变：
css
.element {
animation: rotate 3s infinite, colorChange 3s infinite;
}

@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes colorChange {
from {
background - color: red;
}
to {
background - color: blue;
}
}
动画暂停与播放控制：了解了借助 JavaScript 控制 CSS 动画的暂停与播放。通过修改元素的 animation - play - state 属性，能在需要时暂停或继续动画：
javascript
const element = document.querySelector('.element');
element.style.animationPlayState = 'paused'; // 暂停动画
element.style.animationPlayState = 'running'; // 继续播放动画
（二）CSS 与 JavaScript 交互探索

1. 动态修改 CSS 样式
   使用 style 属性：学会了运用 JavaScript 的 style 属性直接修改元素的 CSS 样式。例如，点击按钮时改变元素的背景颜色：
   html
   改变颜色

这是一个测试元素

修改类名：通过添加或移除元素的类名来动态切换样式。先定义不同的 CSS 类，再使用 JavaScript 修改元素的 classList 属性。比如： css .normal { background - color: white; } .highlight { background - color: yellow; } html 高亮显示

这是一段文本

2. 获取 CSS 计算样式 使用 getComputedStyle 方法：掌握了利用 window.getComputedStyle() 方法获取元素的计算样式。该方法返回的是元素最终应用的样式，包括浏览器默认样式、CSS 文件样式和内联样式等。例如： javascript const element = document.getElementById('myElement'); const computedStyle = window.getComputedStyle(element); const width = computedStyle.width; const color = computedStyle.color; console.log('元素宽度：', width); console.log('元素颜色：', color);