每天进步一点点2021.11.4 css动画之transition

最新推荐文章于 2024-04-25 16:16:15 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量379

点赞数 1

分类专栏： CSS 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/tuzi007a/article/details/121153763

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

transition

简单介绍

前面介绍了css的animation动画及其属性，

这次要说的也是css的一种动画实现–transition

两者有一个很大的区别，transition是需要css或js事件触发的动画。

举个例子：

<!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>Document</title>
  <style>
    div {
      width: 50px;
      height: 50px;
      background-color: pink;
      transition: width 3s;
    }
    div:hover {
      width: 200px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

把鼠标悬停在盒子上，会发现盒子宽度变大。

然后鼠标移出盒子，盒子宽度缩小回原来大小。

在这里插入图片描述

注意，事件里只写变化后的结果，transition要写在目标css里。

再来一个和js事件交互的例子：

<!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>Document</title>
  <style>
    div {
      width: 50px;
      height: 50px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    div.onclick = function() {
      div.style.width = '200px';
      div.style.transition = 'width 2s';
    }
  </script>
</body>
</html>

在这里插入图片描述

点击盒子，可以看到盒子宽度变化到最大。（但是这里不会缩小回原来的宽度）

属性介绍

transition-property

意思是可以过渡变化的css属性，比如例子中的宽度width 。还有一个总括的值all ，同时也是默认值。

all对列出的所有属性都进行过渡。

例如：

transition: all 2s; 也可以写作transition: 2s;

再举个例子：

<!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>Document</title>
  <style>
    div {
      width: 50px;
      height: 50px;
      background-color: pink;
      transition: 2s;
    }
    div:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

在这里插入图片描述

当鼠标放在盒子上，宽度和高度都进行了过渡动画。这时候的all就代表了width和height两个属性。例子中的all省略了，因为all是默认值。

transition-duration

意思是持续时间。也就是完成这个动画过渡所规定的时长，比如例子中的2s 。这个值如果是0，过渡动画就无效。

transition-timing-function

意思是过渡的运动方式，和ainimation里的值一样。

transition-delay

意思是延迟多长时间才开始执行过渡动画。

兼容性

这是一个比较新的css属性。如果用ie显示过渡动画，必须要ie10版本及以上。

多个过渡动画

如果同一个属性，需要做多个过渡动画，要用,隔开。

举个例子，先让宽度展开，高度延迟1s逐步展开：

<!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>Document</title>
  <style>
    div {
      width: 50px;
      height: 50px;
      background-color: pink;
      transition: width 2s, height 2s steps(10, end) 1s;
    }
    div:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

效果：

在这里插入图片描述

参考文档

https://www.w3school.com.cn/cssref/pr_transition.asp
https://www.cnblogs.com/xiaohuochai/p/5347930.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

新生代农民工官方认证码农小拽

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
每天进步一点点2021.11.4 css动画之transition

transition简单介绍属性介绍transition-propertytransition-durationtransition-timing-functiontransition-delay兼容性多个过渡动画参考文档简单介绍前面介绍了css的animation动画及其属性，这次要说的也是css的一种动画实现–transition两者有一个很大的区别，transition是需要css或js事件触发的动画。举个例子：<!DOCTYPE html><html lang="en
复制链接

扫一扫