HTML 过渡

过渡 transition
transition-property:要发生过渡的属性
默认值all
**transition-duration:持续时间 必须写
s ms1s=100ems默认值0s
transition-delay:延迟时间
s ms1s=1000ms

过渡是主动触发的,一般过渡只有在鼠标移入之后才有效所以
过渡属性要写在元素的默认状态中。

 <style>
    div{
      width: 500px;
      height: 500px;
      background-color: antiquewhite;
      /* 写过渡属性 要写在元素的默认位置 过渡一般是只在鼠标移动时才写的效果 */
      transition-property: height,background-color;
      /* 延迟时间 */
      transition-delay: 4ms;
      /* 持续时间 必须写*/
      transition-duration: 5s;
    }
    div:hover{
      height: 700px;background-color: aqua;
    }
  style>
head>
<body>
  <div>过渡属性div>
body>

过渡简写:

过渡简写
transition:要发生过渡的属性持续时间延迟时间运动状态;
-顺序不强调
-持续时间和延迟时间有先后顺序持续时间在前-持续时间必须写
-最简单的过渡
transition:持续时间
-

过渡的运动状态
transition-timing-function
ease 默认值先快后慢
linear 匀速

 <style>
    .father{
      width: 1000px;
      height: 500px;
      border: 5px black solid;
    }
    .father div{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      transition-duration: 20s;
    }
    .ease{
      transition-timing-function: ease;
    }
    .linear{
      transition-timing-function: linear;
    }
    .father:hover div{
      width: 888px;
    }
  style>
head>
<body>
  <div class="father">
    <div class="ease">逐渐慢div>
    <br>
    <div class="linear">匀速div>
  div>
body>

过渡中间值:只有有中间值的属性才可以发生过渡

<style>
    /* 鼠标移入父元素,子元素满满消失 */
    .father{
      width: 500px;
      height: 500px;
      background-color: aqua;

    }
    .son{
      width: 200px;
      height: 200px;
      background-color: chartreuse;
      /* 是子元素慢慢消失,应该在子元素身上写过渡 */
      transition-duration: 2s;
      margin: auto;
    }
    .father:hover .son{
      /* display:none  和   visibility:hidden都没有中间值 */
      opacity: 0;
    }
  style>
head>
<body>
  <div class="father">
    <div class="son">只有有中间值的属性才可以发生过渡div>
  div>
body>

你可能感兴趣的:(html,html,css,css3)