css transition

1. 先实现一个简单的过渡效果吧！

<body>
  <div>hover to move</div>
</body>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      transition: background-color 1s, height 1s 1s;
    }
    div:hover {
      background-color: skyblue;
      height: 200px;
    }
  </style>

2. 简单介绍

      transition: 用来做过渡效果，有四个属性
      1. transition-property  需要过渡的属性，可以指定为none或all，即全不过渡和全部过渡
      2. transition-duration  过渡时间
      3. transition-delay     延迟多长时间执行
      4. transition-timing-function  过渡变化状态
          * linear 匀速
          * ease-in 加速
          * ease-out 减速
          * cubic-bezier 自定义

      transition的缺点：
      1. 只能通过事件触发
      2. 只能执行一次，除非多次触发
      3. 只考虑开始和结束状态，中间状态无法设置

 

posted @ 2021-09-11 15:58  TwinkleG  Views(77)  Comments(0)    收藏  举报