CSS动画及过渡，调用动画，循环播放，反向播放，暂停动画

最新推荐文章于 2025-05-04 03:32:42 发布

原创最新推荐文章于 2025-05-04 03:32:42 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画 #css3

CSS常用功能专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS实现动画和过渡效果。通过@keyframes定义动画，包括开始和结束状态，然后为元素指定动画名称、持续时间和播放次数。同时展示了如何使动画循环播放、反向播放以及如何在鼠标悬停时暂停动画。此外，还演示了过渡效果的应用，当鼠标悬停在元素上时，元素的尺寸和颜色会逐渐变化。

部署运行你感兴趣的模型镜像

CSS部分

               /* 开始状态 */
               0% {
                   transform: translate(0px, 0px) rotate(0deg);
               }

               /* 结束状态 */
               25% {
                   transform: translate(500px, 0px) rotate(90deg);
               }

               50% {
                   transform: translate(500px, 500px) rotate(180deg);
               }

               75% {
                   transform: translate(0px, 500px) rotate(270deg);
               }

               100% {
                   transform: translate(0px, 0px) rotate(360deg);
               }

}

S01E07

           div {
               width: 100px;
               height: 100px;
               background-color: #0000FF;
               /* 2.调用动画 */
               /* 动画名称 */
               animation-name: move;
               /* 持续时间 */
               animation-duration: 8s;
               /* 循环播放 */
               animation-iteration-count: infinite;
               /* 反向播放 */
               animation-direction: alternate;

           }
           /* 暂停动画 */
           div:hover {
               animation-play-state: paused;
           }
           /* */
           /* */
           /* */
           /* */
           /* */
           /* 过渡 */
           #AD {
               width: 100px;
               height: 100px;
               background-color: #000000;

               transition: all 1s;
           }

           #AC {
               width: 100px;
               height: 100px;
               background-color: #0000FF;

               transition: all 1.5s;
           }

           #AB {
               width: 100px;
               height: 100px;
               background-color: #008000;

               transition: all 2s;
           }

           #AA {
               width: 100px;
               height: 100px;

               background-color: pink;
               transition: all 3s;
               margin: 50px 400px;
           }

           #AD:hover {
               width: 200px;
               height: 200px;
               background-color: orange;

           }

           #AC:hover {
               width: 300px;
               height: 300px;
               background-color: seagreen;

           }

           #AB:hover {
               width: 400px;
               height: 400px;
               background-color: salmon;

           }

           #AA:hover {
               width: 600px;
               height: 600px;
               background-color: royalblue;

           }

           #AE {
               width: 60px;
               height: 60px;
               background-color: white;
               border-radius: 50%;
               border: gold 20px solid;

           }
       </style>

附赠body内容