css3动画效果小结(推荐)

对于“css3动画效果小结(推荐)”这一话题，以下是详细的攻略：

1. 前置知识

在学习和实践 CSS3 动画效果之前，需要掌握一些基本的前端知识，包括但不限于：

• HTML 和 CSS 的基本语法和使用方法
• DOM 结构和节点的概念
• CSS 中的选择器和优先级
• CSS 盒模型和布局
• CSS3 中新特性的概念和用法

同时也需要了解一些与动画相关的 CSS 属性和方法：

• transition：实现简单的过渡效果
• transform：通过旋转、缩放、平移等变换来改变元素的显示效果
• animation：提供更复杂的动画效果，能够控制动画的持续时间、速度、循环等属性

2. CSS3 动画基础

2.1 transition

transition 属性用于实现简单的过渡效果，通常用于在鼠标悬停或元素状态变化时触发。其语法为：

transition: property duration timing-function delay;

其中：

• property：指定需要过渡的属性名称，多个属性之间用逗号分隔
• duration：指定过渡效果持续的时间，单位为秒（s）或毫秒（ms）
• timing-function：指定过渡的时间曲线，常用的有 ease、linear、ease-in、ease-out 等
• delay：指定过渡效果的延迟时间，单位同样为秒或毫秒

示例：

div {
  background-color: red;
  transition: background-color 1s ease-in-out;
}

div:hover {
  background-color: blue;
}

2.2 transform

transform 属性用于通过旋转、缩放、平移等变换来改变元素的显示效果。其语法为：

transform: none | <transform-function> [ <transform-function> ]*

其中 <transform-function> 用于指定需要应用的变换函数，常用的有：

• rotate(deg)：旋转元素，degrees 度数为正数时表示顺时针旋转，负数时表示逆时针旋转
• scale(x, y)：缩放元素，x 和 y 分别表示沿 x 轴和 y 轴的缩放比例，取值为浮点数，1 表示原大小，小于 1 表示缩小，大于 1 表示放大
• translate(x, y)：平移元素，x 和 y 表示沿 x 轴和 y 轴平移的距离，取值为长度单位，如 px、em 等
• skew(x-angle, y-angle)：扭曲元素，x-angle 和 y-angle 分别表示沿 x 轴和 y 轴的扭曲角度，取值为度数，正数表示顺时针扭曲，负数表示逆时针扭曲
• matrix(n,n,n,n,n,n)：一般性变形，使用 6 个值的矩阵来进行变形

示例：

div {
  transform: rotate(45deg) scale(1.5) translate(20px, 20px) skew(20deg, 10deg);
}

2.3 animation

animation 属性能够提供更复杂的动画效果，通过设置多个关键帧（keyframe）来控制动画在不同时间点的状态，还可以控制动画的持续时间、速度、循环等属性。其语法为：

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

其中：

• name：指定动画名称，与 @keyframes 规则中定义的名称对应
• duration：指定动画持续时间，单位为秒（s）或毫秒（ms）
• timing-function：指定动画的时间曲线，同 transition 属性
• delay：指定动画的延迟时间，同 transition 属性
• iteration-count：指定动画的循环次数，可以是一个整数，也可以是 infinite 表示无限循环
• direction：指定动画的播放方向，有 normal（正向）和 reverse（反向）两种，还有 alternate 和 alternate-reverse 表示交替播放正向和反向
• fill-mode：指定动画结束后元素的样式，有 none（默认）、forwards、backwards 和 both 四种
• play-state：指定动画的播放状态，有 running(默认) 和 paused 两种状态

示例：

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

div {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

3. CSS3 动画实战

3.1 翻页效果

下面示例是实现一个翻页效果的代码片段：

<div class="page">
  <div class="page-front">
    <h2>Front</h2>
  </div>
  <div class="page-back">
    <h2>Back</h2>
  </div>
</div>

.page {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 800px;  /* 定义透视距离 */
  transition: transform 1.5s ease-in-out;  /* 定义过渡效果 */
}

/* 定义正面和背面的样式 */
.page-front, .page-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .2);
  backface-visibility: hidden;  /* 隐藏背面可见性 */
  transform-style: preserve-3d;  /* 定义子元素按 3D 转换 */
}

/* 定义正面的样式 */
.page-front {
  transform-origin: center left;  /* 定义旋转中心 */
}

/* 定义背面的样式 */
.page-back {
  transform-origin: center right;
  transform: rotateY(-180deg);  /* 初始状态旋转 180 度 */
}

/* 鼠标悬停时触发的翻页效果 */
.page:hover {
  transform: rotateY(-180deg);
}

3.2 点击展开动画

下面示例实现一个点击展开动画的代码片段：

<div class="box">
  <div class="box-header">
    <h2>Header</h2>
    <span class="icon"></span>
  </div>
  <div class="box-content">
    <p>Content</p>
    <p>Content</p>
  </div>
</div>

.box {
  width: 300px;
  background-color: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  transition: height .5s ease-in-out;
}

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.icon::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  transition: transform .3s ease-in-out;
}

/* 点击展开动画 */
.box.closed {
  height: 54px;
}

.box.closed .box-header .icon::before {
  transform: rotate(135deg);
}

.box.open {
  height: auto;
}

.box.open .box-header .icon::before {
  transform: rotate(-45deg);
}

const box = document.querySelector('.box')
box.addEventListener('click', () => {
  box.classList.toggle('closed')
  box.classList.toggle('open')
})

到这里，关于“css3动画效果小结(推荐)”的攻略就结束了。希望能对你有所帮助！