前端动画实现一——css3的animation、transition和transform

最新推荐文章于 2025-04-01 21:54:27 发布

原创最新推荐文章于 2025-04-01 21:54:27 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画

html 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS3中用于动画的三个关键特性：animation用于定义完整的动画过程，包括@keyframes；transition专注于单一属性变化的过渡效果；transform则提供了如旋转、伸缩等常见变换函数。理解这三个概念对于创建前端动画至关重要，它们共同决定了图形状态的改变和变化过程。通过合理组合，开发者可以实现从简单过渡到复杂动画的各种效果。

1.animation：哪个动画，动画过程 @keyframes

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
针对的是一套样式整体，transition是针对某些属性所有变化。

.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

2.transition: 属性变化的过渡过程，直接针对某个或某些属性，只要这个属性有变化，就加上这种过渡效果

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, 
        background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}

3.transform: 几种常见变化方式，针对某个元素的旋转、伸缩等几个常见的变化函数（预设好的变化，是变化本身，可以结合transition表示过渡过程，状态的最终样子）

.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

总的来说，描述一个动画主要是两个方面：

一是状态量，是某个时间点确定的状态，针对图形的属性定性；

二是过程，是从某个状态变到另一个状态的过程，这其中的变化效果可以设定。

1.状态量主要由属性直接量、transform规定终点状态这两种方式来设定

2.过程设定主要由transition、animation两个的值

transition设定针对某个属性，这个属性的所有变化加上平滑的过渡效果，并且只针对一次完整的变化，因此没有循环。

animation是针对某个元素一整台的样式变化到另一套样式，是一整个动画的过程，有循环功能，偏向于复杂的整体样式变化，并且过程可定制性更强，可以设定每个阶段的状态量，transition可能只是起点终点两种状态量的自动平滑过渡。

所以对某个图形设定变化，可以先设定状态量，考虑可否由transform提供的函数，或者属性直接变换，然后加过渡效果，考虑是简单的一次变化还是复杂的动画效果。