IT课程 CSS基础 027_动画与过渡

动画

CSS 动画是一种可用于使元素的属性值逐渐变化的效果。动画可以应用于任何 CSS 属性，包括宽度、高度、颜色、背景、边框等。

animation 属性的语法如下：

name：指定动画的名称。
duration：指定动画的持续时间。
timing-function：指定动画的速度曲线。
delay：指定动画的延迟。
iteration-count：指定动画的播放次数。
direction：指定动画的播放方向。
fill-mode：指定动画在动画完成后或在动画被暂停或停止后元素的样式。

示例：

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* 应用动画，持续2秒，无限循环，线性过渡 */
14
  }

1
    <div class="example1"></div>

效果：

示例效果

@keyframes rotate 定义了一个名为 rotate 的关键帧动画，从初始状态（0度旋转）到结束状态（360度旋转）。
.animated-box 元素应用了这个动画，通过 animation 属性指定了动画名称、持续时间、循环方式等。

CSS 动画和 CSS 过渡都是可用于使元素的属性值逐渐变化的效果。两者的主要区别在于：

动画可以重复播放，而过渡只能播放一次。
动画可以指定动画的播放方向，而过渡不能。
动画可以指定动画在动画完成后或在动画被暂停或停止后元素的样式，而过渡不能。

过渡

CSS 过渡是一种可用于使元素的属性值逐渐变化的效果。过渡可以应用于任何 CSS 属性，包括宽度、高度、颜色、背景、边框等。过渡的效果可能会因浏览器和设备的不同而有所不同，过渡的性能可能会因过渡的复杂程度而有所不同。

示例：

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* 定义过渡属性和时间 */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

效果：

示例效果

动画

过渡

评论