一文通过动画来快速学习 css ！

程序猿 • 2025年12月24日 08:19:54 • 好文分享 • 阅读 0

本篇文章带大家深入解析一下如何实现动画效果，通过动画来快速学习 css ，希望对大家有所帮助！

#hellocss { background-color: blue; color: yellow; width: 20px; transition-property: width; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s; }

Hello,HTML

Hello,CSS

function trans1(){ let hcss1 = document.getElementById(“hellocss”); hcss1.style.width = “100px”; }

熟练了之后，我们也可以将４个属性简写成一个：

transition: width 5s linear 1s;

如果没有延时，第4项可以不写。如果采用先慢后快的ease方式，第3项也可以省略。如果第一项是什么变都动，可以写成all。但是第二项动画时长不能不写，不写默认是0秒，就啥也没有了。

所有的可以线性计算的属性都可以用来进行动画。除了宽、高、位置等容易理解的坐标属性，颜色属性也是经常被用来做动画的好场景。我们来看一个从蓝底黄字到白底黑字的动画过程：

                  #hellocss {            background-color: blue;            color: yellow;            transition: all 10s linear 1s;        }            Hello,HTML
    Hello,CSS
            function trans1(){            let hcss1 = document.getElementById("hellocss");            hcss1.style.backgroundColor = "white";            hcss1.style.color="red";         }

keyframes动画

上面的transition比较简单，针对于比如要循环多少次，或者变过去还要再变回来，或者中间要变几次等，我们就需要指定更多的属性。这些需求就由keyframes动画来满足。

keyframes动画的好处就是起点和终点都在keyframes中指定，不用再写事件去改变了, 全部在css中完成：

        @keyframes color_change{            from {                background-color: blue;                color: yellow;            }            to {                background-color: white;                color: black;            }        }

然后我们在一个css选择器里面去引用定义好的keyframes动画，同时指定动画时长、变化曲线和延时：

        #hellocss {            animation-name: color_change;            animation-duration: 10s;            animation-timing-function: linear;            animation-delay: 1s;        }

到了keyframes动画，我们终于可以指定播放多少次了，比如连播三次：

        #hellocss {            animation-name: color_change;            animation-duration: 10s;            animation-timing-function: linear;            animation-delay: 1s;            animation-iteration-count: 3;        }

甚至可以无限性地播放下去:

animation-iteration-count: infinite;

光循环播还不过瘾，我们还想先正着变，然后再变回来，我们可以将方向设为交替播放：

animation-direction: alternate;

把上面的综合在一起，大家跑起来看看：

                @keyframes color_change {        from {          background-color: blue;          color: yellow;        }        to {          background-color: white;          color: black;        }      }      #hellocss {        animation-name: color_change;        animation-duration: 5s;        animation-timing-function: linear;        animation-delay: 1s;        animation-iteration-count: infinite;        animation-direction: alternate;      }            Hello,HTML
    Hello,CSS

而其实呢，from和to，分别是0%和100%的别名，也可以这么写：

      @keyframes color_change {        0% {          background-color: blue;          color: yellow;        }        100% {          background-color: white;          color: black;        }      }

这样我们可以增加百分比，让变化变得更有趣一些:

      @keyframes color_change {        0% {          background-color: blue;          color: yellow;        }        50% {          background-color: yellowgreen;          color: red;        }        100% {          background-color: white;          color: black;        }      }

最后，如果想让动画播放暂停怎么办? 我们可以通过修改animationPlayState属性为paused来实现，比如我们让点击第一个div来实现暂停功能：

      Hello,HTML
    Hello,CSS
          function trans1() {        let hcss1 = document.getElementById("hellocss");        hcss1.style.animationPlayState = "paused";      }

通过动画形象理解css属性

变形 – 圆角矩形

我们现在终于可以看看开篇时的第一个动画是如何写成的了：

      @keyframes color_change {        0% {          background-color: blue;          color: yellow;          border-radius: 0px;        }        50% {          background-color: yellowgreen;          color: red;        }        100% {          background-color: palegoldenrod;          color: black;          border-radius: 100px;        }      }

平面移动：transform:translate属性

最简单的平移方式就是使用transform:translate属性。比如我们开篇的第二个动画：

我们先让变色的圆角矩形向下移100px，然后再右移100px:

            0% {                background-color: blue;                color: yellow;                border-radius: 0px;                transform:translate(0px,0px)            }            50% {                background-color: yellowgreen;                color: red;                transform:translate(0px,100px)            }            100% {                background-color: palegoldenrod;                color: black;                border-radius: 100px;                transform:translate(100px,100px)            }        }

旋转：transform:rotate属性

最后我们看旋转属性。

        @keyframes color_change{            0% {                background-color: blue;                color: yellow;                border-radius: 0px;                transform:translate(0px,0px);                transform:rotate(0deg);            }            50% {                background-color: yellowgreen;                color: red;                transform:translate(0px,100px);                transform:rotate(90deg);            }            100% {                background-color: palegoldenrod;                color: black;                border-radius: 100px;                transform:translate(100px,100px);                transform:rotate(180deg);            }        }

通过动画学习盒子模型

让我们回归基础，通过动画来了解盒子模型。

所谓盒子，最基础的就是宽和高。这没啥可说的，来个宽高动画先体验一下：

                  @keyframes box_change {            0% {                height: 50px;                width: 50px;            }            50% {                height: 200px;                width: 50px;            }            100% {                height: 200px;                width: 200px;            }        }        .box1 {            background-color: blue;            color: yellow;            opacity: 0.65;            animation-name: box_change;            animation-duration: 10s;            animation-delay: 1s;            animation-timing-function: ease;            animation-iteration-count: infinite;            animation-direction: alternate;        }              Hello Box

除了宽高之外，盒子有边框，边框内部有padding，边框外面还有margin。

包括边框在内，都分为top, bottom, left, right四个方向：

        border-width: 5px;        border-top-color: #f5222d;        border-bottom-color: #cf1322;        border-left-color: #a8071a;        border-right-color: #820014;        padding: 10px;        margin: 15px;

我们现在给边框加上颜色和形状，带着margin和padding动起来看看效果：

代码如下：

                @keyframes box_change {        0% {          height: 50px;          width: 50px;          border-style: solid;        }        50% {          height: 200px;          width: 50px;          border-style: dotted;        }        100% {          height: 200px;          width: 200px;          border-style: dashed;        }      }      .box1 {        background-color: blue;        color: yellow;        border-width: 5px;        border-top-color: #f5222d;        border-bottom-color: #cf1322;        border-left-color: #a8071a;        border-right-color: #820014;        padding: 10px;        margin: 15px;        animation-name: box_change;        animation-duration: 10s;        animation-delay: 1s;        animation-timing-function: ease;        animation-iteration-count: infinite;        animation-direction: alternate;      }            Hello Box

打开chrome的开发者工具，我们可以更清楚地看清content, padding, border, margin, 之间的关系：

Border取5px只是为了让其更容易被识别，但是太丑了，我们将其改为2px。效果就好得多了：

（学习视频分享：css视频教程）

以上就是一文通过动画来快速学习 css ！的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1623531.html