Web学习网站

Appearance

CSS 变换、过渡和动画 ​

CSS 变换（Transform）、过渡（Transition）和动画（Animation）为网页添加了动态效果，使用户界面更加生动和交互性更强。这些功能可以让元素在不同状态之间平滑过渡，或者创建复杂的动画效果。

CSS 变换 (Transform) ​

变换属性允许我们对元素进行旋转、缩放、倾斜或移动，而不会影响文档流中的其他元素。

2D 变换 ​

translate() ​

translate() 函数移动元素的位置。

css
.translate {
  transform: translate(50px, 30px); /* 水平移动50px，垂直移动30px */
}

.translate-x {
  transform: translateX(50px); /* 只在水平方向移动 */
}

.translate-y {
  transform: translateY(30px); /* 只在垂直方向移动 */
}

rotate() ​

rotate() 函数旋转元素。

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

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

scale() ​

scale() 函数缩放元素。

css
.scale {
  transform: scale(1.5); /* 放大1.5倍 */
}

.scale-down {
  transform: scale(0.8); /* 缩小到0.8倍 */
}

.scale-x {
  transform: scaleX(1.2); /* 只在水平方向缩放 */
}

.scale-y {
  transform: scaleY(0.8); /* 只在垂直方向缩放 */
}

skew() ​

skew() 函数倾斜元素。

css
.skew {
  transform: skew(30deg); /* 在X轴倾斜30度 */
}

.skew-xy {
  transform: skew(30deg, 15deg); /* X轴倾斜30度，Y轴倾斜15度 */
}

.skew-x {
  transform: skewX(30deg); /* 只在X轴倾斜 */
}

.skew-y {
  transform: skewY(15deg); /* 只在Y轴倾斜 */
}

3D 变换 ​

translateZ() 和 translate3d() ​

css
.translate-z {
  transform: translateZ(50px);
}

.translate-3d {
  transform: translate3d(20px, 30px, 50px);
}

rotateX(), rotateY(), rotateZ() 和 rotate3d() ​

css
.rotate-x {
  transform: rotateX(45deg);
}

.rotate-y {
  transform: rotateY(45deg);
}

.rotate-z {
  transform: rotateZ(45deg);
}

.rotate-3d {
  transform: rotate3d(1, 1, 1, 45deg);
}

scaleZ() 和 scale3d() ​

css
.scale-z {
  transform: scaleZ(1.5);
}

.scale-3d {
  transform: scale3d(1.2, 1.2, 1.5);
}

变换原点 ​

transform-origin 属性定义变换的原点。

css
.origin-center {
  transform: rotate(45deg);
  transform-origin: center; /* 默认值 */
}

.origin-corner {
  transform: rotate(45deg);
  transform-origin: top left;
}

.origin-custom {
  transform: rotate(45deg);
  transform-origin: 20% 80%;
}

透视 ​

perspective 属性定义 3D 变换的透视效果。

css
.perspective {
  perspective: 1000px;
}

.perspective-element {
  transform: rotateY(45deg);
}

CSS 过渡 (Transition) ​

过渡允许元素在不同状态之间平滑地改变，例如在 hover 状态时。

transition-property ​

transition-property 属性指定应用过渡效果的 CSS 属性。

css
.transition {
  transition-property: all; /* 所有属性 */
}

.transition-specific {
  transition-property: background-color, transform;
}

transition-duration ​

transition-duration 属性指定过渡效果的持续时间。

css
.duration {
  transition-duration: 0.3s;
}

.duration-long {
  transition-duration: 2s;
}

transition-timing-function ​

transition-timing-function 属性定义过渡效果的时间函数。

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

.timing-ease {
  transition-timing-function: ease; /* 默认值 */
}

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

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

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

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

transition-delay ​

transition-delay 属性指定过渡效果的延迟时间。

css
.delay {
  transition-delay: 0.5s;
}

transition ​

transition 是过渡属性的简写。

css
.element {
  transition: all 0.3s ease 0s;
}

/* 语法顺序：
   transition-property transition-duration transition-timing-function transition-delay */

CSS 动画 (Animation) ​

动画允许创建更复杂的运动效果，可以重复播放并具有多个关键帧。

@keyframes ​

@keyframes 规则定义动画的关键帧。

css
@keyframes slide-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-20px);
  }
}

animation-name ​

animation-name 属性指定要应用的动画名称。

css
.animated {
  animation-name: slide-in;
}

animation-duration ​

animation-duration 属性指定动画的持续时间。

css
.duration {
  animation-duration: 2s;
}

animation-timing-function ​

animation-timing-function 属性定义动画的时间函数。

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

animation-delay ​

animation-delay 属性指定动画开始前的延迟时间。

css
.delay {
  animation-delay: 1s;
}

animation-iteration-count ​

animation-iteration-count 属性指定动画的播放次数。

css
.once {
  animation-iteration-count: 1;
}

.infinite {
  animation-iteration-count: infinite;
}

.multiple {
  animation-iteration-count: 5;
}

animation-direction ​

animation-direction 属性指定动画的播放方向。

css
.normal {
  animation-direction: normal; /* 默认值，正常播放 */
}

.reverse {
  animation-direction: reverse; /* 反向播放 */
}

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

.alternate-reverse {
  animation-direction: alternate-reverse;
}

animation-fill-mode ​

animation-fill-mode 属性指定动画在执行前后如何应用样式。

css
.none {
  animation-fill-mode: none; /* 默认值 */
}

.forwards {
  animation-fill-mode: forwards; /* 动画结束后保持最后一帧样式 */
}

.backwards {
  animation-fill-mode: backwards; /* 动画开始前应用第一帧样式 */
}

.both {
  animation-fill-mode: both; /* 同时应用 forwards 和 backwards */
}

animation-play-state ​

animation-play-state 属性控制动画的播放状态。

css
.running {
  animation-play-state: running; /* 播放 */
}

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

animation ​

animation 是动画属性的简写。

css
.element {
  animation: slide-in 2s ease-in 0.5s infinite alternate;
}

/* 语法顺序：
   animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state */

实际示例 ​

按钮悬停效果 ​

html
<button class="hover-button">悬停我</button>
css
.hover-button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hover-button:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

旋转加载动画 ​

html
<div class="spinner"></div>
css
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

弹跳球动画 ​

html
<div class="bouncing-ball"></div>
css
.bouncing-ball {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  border-radius: 50%;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-50px);
  }
}

淡入效果 ​

html
<div class="fade-in">淡入元素</div>
css
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

性能优化 ​

  1. 使用 transform 和 opacity：这些属性不会触发重排（reflow），性能更好
  2. 使用 will-change 属性：提示浏览器哪些属性将要改变
  3. 避免同时动画过多元素：可能导致性能问题
  4. 使用硬件加速：添加 transform: translateZ(0) 或 transform: translate3d(0,0,0) 触发硬件加速
css
.optimized {
  will-change: transform;
  transform: translateZ(0); /* 触发硬件加速 */
}

浏览器兼容性 ​

  • Transform 在 IE9+ 支持
  • Transition 在 IE10+ 支持
  • Animation 在 IE10+ 支持
  • 3D 变换在较新的浏览器中有更好的支持

最佳实践 ​

  1. 适度使用：动画效果应该增强用户体验，而不是分散注意力
  2. 保持简洁：避免过度复杂的动画
  3. 考虑可访问性：提供减少动画的选项
  4. 性能优先：选择性能好的属性进行动画
  5. 响应式设计：在移动设备上可能需要简化动画

总结 ​

CSS 变换、过渡和动画为网页带来了动态和交互性。通过合理使用这些功能，可以创建吸引人的用户界面并提升用户体验。掌握这些技术对于现代 Web 开发非常重要，但同时也要注意性能和可访问性方面的考虑。