CSS3动画效果笔记

CSS3动画效果笔记

CSS3提供了强大的动画特性，可以通过简单的样式变化、过渡和关键帧动画来创建各种各样的动画效果。本文将介绍CSS3动画的基础知识和常见用法。

1. 过渡（Transition）

过渡是CSS3中最简单的动画方式之一。通过改变样式属性的过渡效果，元素在改变状态时能够平滑地过渡。具体步骤如下：

1. 定义过渡属性：使用transition属性来定义要过渡的样式属性、过渡时间和过渡效果等；
2. 触发过渡：通过添加或删除类名、伪类选择器或JavaScript来触发过渡效果。

以下是一个实例：

.transition-demo {
  transition: width 0.5s ease-in-out;
}

.transition-demo:hover {
  width: 200px;
}

2. 关键帧动画（@keyframes）
   关键帧动画可以定义一系列关键帧，通过在关键帧之间进行插值来实现平滑的动画过程。具体步骤如下：

定义关键帧：使用@keyframes规则来定义动画的关键帧和每个关键帧的样式；
应用关键帧：通过添加类名、伪类选择器或JavaScript来应用关键帧动画。
以下是一个实例：

.keyframes-demo {
  animation: rotate 2s infinite;
}

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

3. 动画属性说明
   在动画中，我们可以使用一些属性来控制动画效果的细节。常见的动画属性包括：

animation-name：指定要使用的关键帧动画的名称；
animation-duration：指定动画的持续时间；
animation-delay：指定动画延迟开始的时间；
animation-timing-function：指定动画的时间函数；
animation-iteration-count：指定动画的播放次数；
animation-direction：指定动画的播放方向；
animation-fill-mode：指定动画在非动画时间段的样式。
具体的使用方法和取值可以根据需要进行调整。

4. CSS3动画示例
   这里列举一些常见的CSS3动画示例，供你参考：

淡入淡出效果

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

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

旋转动画

.rotate {
  animation: rotate 4s linear infinite;
}

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

缩放动画

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

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

移动动画

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

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

抖动效果

.shake {
  animation: shake 0.5s linear infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}