transition

时间：2020-10-20 16:22:50 阅读：27 评论：0 收藏：0 [点我收藏+]

transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。transition包含4个属性值：执行变换的属性：transition-property，变换延续的时间：transition-duration，变换的速率变化：transition-timing-function，变换的延迟时间：transition-delay：

transition-property的取值包含none（没有属性改变），all（所有属性改变），indent（元素属性名,包括color,length,percentage,integer,number,transform,rectangle,visibility,shadow,gradient,SVG,space-separated list of above,a shorthand property）；
transition-duration的默认值是0 ，即变化是即时的，单位是s或者ms，包括:before和:after伪元素；
transiton-timing-function的取值包含ease(逐渐变慢，默认值)，linear（匀速），ease-in（加速），ease-out（减速），ease-in-out（加速然后减速），cubic-bezier(可以自定义时间曲线)；
transition-delay：同transition-duration,当只写了一个时间的时候，代表的是变换延续的时间。

在实际运用中，想要同时改变多个css属性时，可以把几个transition的声明写在一起，中间用逗号隔开，例如transition：background 0.5s ease-in,color 0.3s ease-out。

 #timings-demo {
     border: 1px solid #ccc;
     padding: 10px;
     height: 400px;
     width: 400px;
   }
     
  .demo-box {
     width: 100px;
     height: 50px;
     text-align: center;
     line-height: 50px;
     text-align: center;
     color: #fff;
     background: #96c;
     border-radius: 5px;
     box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
     margin-bottom: 10px;
  }

<div id="timings-demo">
            <div id="ease" class="demo-box">Ease</div>
            <div id="ease-in" class="demo-box">Ease-in</div>
            <div id="ease-out" class="demo-box">Ease-out</div>
            <div id="ease-in-out" class="demo-box">Ease-in-out</div>
            <div id="linear" class="demo-box">Linear</div>
            <div id="cubic-bezier" class="demo-box">Cubic-bezier</div>
        </div>

/*ease效果：*/        
  #ease {
     transition: all 5s ease 0.3s;
     background: #f36;      
  }
 /*ease-in效果：*/
  #ease-in {
     transition: all 3s ease-in 0.5s;
     background: #369;
  }
  /*ease-out效果：*/
  #ease-out {
    transition: all 5s ease-out 0s;
    background: #636;      
  }
 /*ease-in-out效果：*/
  #ease-in-out {
    transition: all 1s ease-in-out 2s;
    background: #3e6;
  }
  /*linear效果：*/
  #linear {
    transition: all 6s linear 0s;
    background: #999;
  }
  /*cubic-bezier效果：*/
  #cubic-bezier {
    transition: all 4s cubic-bezier 1s;
    background: #6d6;
  }
    #timings-demo:hover .demo-box{
    transform: rotate(360deg) scale(1.2);
    background: #369;
    border: 1px solid rgba(255,230,255,08);
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    margin-left: 280px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 15px;
  }

hover的transition

.demo{
                width:100px;
                height:100px;
                text-align:center;
                line-height:100px;
                border:10px solid #ccc;
                border-radius:60px;
                font-size:20px;
                -webkit-backface-visibility:hidden;
            }
            #demo1{
                transition:border-color 0.3s ease;
            }
            #demo1:hover{
                border-color:#a3d7ff;
            }

            #demo2{
                transition:all 1s ease;
            }
            #demo2:hover{
                background:#a3d7ff;
                transform: rotate(360deg);
                transition:background 0.3s ease;
            }
<div id="demo1" class="demo">demo1</div>
        <div id="demo2" class="demo">demo2</div>

transition

标签：执行 ack 变换获得 otto ext length 没有 one

原文地址：https://www.cnblogs.com/yuyujuan/p/13838583.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行