CSS之transform、transition和animation介绍

学习&实践爱好者

于 2024-03-20 21:30:00 发布

阅读量1.7k

点赞数 54

分类专栏： HTML5与CSS3 前端开发文章标签： css 前端

本文链接：https://blog.csdn.net/cnds123/article/details/136846052

版权

HTML5与CSS3 同时被 2 个专栏收录

78 篇文章 14 订阅

订阅专栏

前端开发

64 篇文章 4 订阅

订阅专栏

本文介绍了CSS3中的三个关键动画属性：transform用于元素变换，transition实现平滑过渡效果，animation则支持复杂动画。通过实例演示了如何使用这些属性来增强网页元素的交互性和视觉吸引力。

摘要由CSDN通过智能技术生成

CSS之transform、transition和animation介绍

transform、transition 和 animation 都是 CSS3 中用于实现页面元素动画效果的属性（properties）。简单地说，tansition（过渡）是一个过渡属性，就是一个属性从一个值平滑过渡到另一个值。tansform（变换），就是一个整体的位置（或整体大小）发生变换——如旋转、缩放、倾斜或移动。animation（动画），就是在一段时间内各种属性进行变化从而达到一个动画的效果。

【transition属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

简写属性（Shorthand properties）是CSS中一种将多个单独属性组合成一个属性的便捷方式——也就是可以让你同时设置好几个 CSS 属性值的 CSS 属性。通过简写属性，开发者可以在一个属性值中设置多个属性，从而简化代码书写。】

transform、transition 和 animation 都是 CSS3 中用于实现页面元素动画效果的属性。

transform：transform 属性（property）允许你对元素进行旋转、缩放、倾斜或平移等变换操作。常用的 transform 方法包括：rotate()、scale()、skew()、translate() 和 matrix() 等。通过 transform 属性，可以让元素实现更加灵活和复杂的动画效果。transform - CSS：层叠样式表 | MDN
transition：transition 属性允许你在元素的属性值发生变化时，控制这些变化是如何执行的，从而实现平滑的过渡效果。通过指定 transition-property、transition-duration、transition-timing-function 和 transition-delay 属性，可以设置元素在不同状态之间过渡的表现方式，使得动画更加流畅和自然。transition - CSS：层叠样式表 | MDN
animation：animation 属性允许你创建复杂的动画效果，可以定义关键帧、动画持续时间、动画速度曲线、重复次数等属性。通过创建 @keyframes 规则，可以定义动画的关键帧（keyframes），然后将这些关键帧应用到元素上，从而实现多样化和高度定制的动画效果。animation - CSS：层叠样式表 | MDN

这些属性在现代网页设计中被广泛应用，可以使页面元素实现更加生动、吸引人的交互效果，提升用户体验和页面的视觉吸引力。同时，它们也有助于优化页面性能，减少 JavaScript 动画的使用，提升页面的渲染和加载速度。

下面给出transition、transform和animation的简单示例。

使用transition的示例

当用户将鼠标悬停在按钮上时，按钮的背景颜色会从蓝色平滑过渡到红色，过渡的时间为0.3秒。源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用transition属性示例</title>
    <style>
        .btn {
          background-color: blue;
          color: white;
          padding: 10px 20px;
          transition: background-color 0.3s;
        }

        .btn:hover {
          background-color: red;
        }

    </style>
</head>
<body>
    <h3>CSS的transition属性</h3>
    <p>CSS的transition属性用于从一个属性值过渡到另一个属性值，实现平滑的动画效果。</p>
    <p> 请将鼠标悬停在按钮上看看：按钮的背景颜色会从蓝色平滑过渡到红色</p>
    <button class="btn">Hover Me</button>
</body>
</html>

使用transform的示例

当用户点击按钮时，按钮会在0.3秒内被放大1.2倍。源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用transform属性示例</title>
    <style>
        .btn {
          padding: 10px 20px;
          transition: transform 0.3s;
        }

        .btn:active {
          transform: scale(1.2); /* 点击按钮时放大1.2倍 */
        }

    </style>
</head>
<body>
    <h3>CSS的transform属性</h3>
    <p>CSS的transform属性用于对元素的整体位置或大小进行变换，如旋转、缩放、倾斜或移动</p>
    <p>当用户点击按钮时，按钮会放大倍</p>
    <button class="btn">Hover Me</button>
</body>
</html>

使用animation的示例

页面中绿色的块会以线性的方式无限循环地旋转360度，动画持续时间为20秒。源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用animation属性示例</title>
    <style>
        .box {
          width: 100px;
          height: 50px;
          background-color: green;
          animation: rotate 20s linear infinite;
        }

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

    </style>
</head>
<body>
    <h3>CSS的animation属性</h3>
    <p>CSS的animation属性用于在一段时间内让元素各种属性值进行变化，从而产生动画效果。</p>
    <p>绿色的块不停地旋转</p>
    <div class="box"></div>
</body>
</html>