CSS动画属性：transition过渡、 transform变形、animation动画

打响第一枪

已于 2024-01-28 22:34:50 修改

阅读量2k

点赞数 52

文章标签： css

于 2024-01-28 22:32:39 首次发布

本文链接：https://blog.csdn.net/wcxrib/article/details/135901223

版权

本文详细介绍了CSS中的过渡属性transition及其使用方法，包括过渡的四要素、不同类型的动画，以及如何通过transform实现2D和3D变换。还提供了一个简单的HTML示例，展示了过渡效果在鼠标悬停事件中的应用。

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

在 CSS 中，过渡属性：transition， t元素从一种样式逐渐改变为另一种的效果，支持可识别中间值的属性 (如大小、颜色、位置、透明度等)，而如 display 属性则不支持。transform：平移，旋转，倾角等

一、css过渡四要素

1、所过渡的元素必须有css样式

语法：transition: name | duration | timing function | delay;

transition-property：规定应用过渡的 CSS 属性的名称。
transition-duration：过渡所用的时时间。
transition-timing-function：过渡元素的时间曲线，属性值有linear(匀速的过程)、ease(逐渐变慢的过程)、ease-in(加速的过程)、ease-out(减速的过程)、cubic-bezier(0,0,0,0)贝塞尔曲线。
transition-delay：指定一个过渡的开始时间（即多长时间后开始执行），默认是0。

2、CSS中过渡动画类型可分为四类

1、颜色过渡动画（color）
2、尺寸过渡动画（size）
3、形状过渡动画（shape）
4、位置过渡动画（position）

二、transform变形(2D、3D)

对元素进行移动、缩放、转动、拉长或拉伸。属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)、perspective(3D透视视图)

1、平移：translate()

元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数

2、旋转：rotate()

元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

3、缩放：scale()

元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

三、animation（动画）

语法：animation: name duration timing-function delay iteration-count direction;

name（需要绑定到选择器的 keyframe 名称）
duration（完成动画所花费的时间，以秒或毫秒计）
function（动画的速度曲线）
delay（动画开始之前的延迟）
count（动画应该播放的次数）
direction（是否应该轮流反向播放动画）

二、简单例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 过渡</title>
  <style>
    body{
      height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      height: 200px;
      width: 200px;
      border: 1px solid #000;
      transition: all 0.3s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/
      -webkit-transform: all 0.3s linear 0s; /* 兼容Safari and Chrome */;
      -ms-transition: all 0.3s linear 0s; /*兼容IE10+*/
      -moz-transform: all 0.3s linear 0s; /*兼容 Firefox */
      -o-transition: all 0.3s linear 0s; /* 兼容Opera */
    }

    .box:hover {
      width: 300px;
      height: 300px;
      box-shadow: 0px 0px 5px orange;
    }
  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

打响第一枪

关注

52
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS动画属性：transition过渡、 transform变形、animation动画

在 CSS 中，过渡属性：transition， t元素从一种样式逐渐改变为另一种的效果，支持可识别中间值的属性 (如大小、颜色、位置、透明度等)，而如 display 属性则不支持。transform：平移，旋转，倾角等。
复制链接

扫一扫