# Transition:添加弹出过渡效果

Posted 2021-01-07 deepblue775737449

# Transition:添加弹出过渡效果

通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

W3C-transition
MDN-transition

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素中点值样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

• transition：为一个元素在不同状态之间切换的时候定义不同的过渡效果。
• transition: property | duration | timing function | delay ;
  • property:过渡效果的 CSS 属性的名称。
  • duration：完成过渡效果需要多少秒或毫秒。
  • transition-timing-function：规定速度效果的速度曲线。
  • delay：过渡效果何时开始。[规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。]
  • 默认值：all 0 ease 0
• 属性语法值及解释：
  • transition-property: none | all | property;
    • [property name1,name2,name3...][具有过渡效果属性]
  • transition-duration: time;[规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果]
  • transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
    bezier(n,n,n,n); 详解

  • transition-delay: time;

transition-timing-function: linear  /* the same speed */
                          : ease   /* slow-fast-slow */
                          : ease-in  /* slow start*/
                          : ease-out    /* slow end */
                          : ease-in-out     /*slow start-slow end*/
                          : cubic-bezier(n,n,n,n);  /*define your own values in a cubic-bezier function*/

▲ 单个属性：
{
width:100px;    /*初始状态*/
background:blue; /*需要设置背景色或border，否则效果不可见。*/
transition-property: width; 
transition-duration: 2s;/*效果过渡时间不可缺省，否则虽然可触发，但无过渡效果。*/
}
div:hover{width:300px;} /*目标值及触发*/

/*也可集合使用，如下*/
transition: width 2s;

▲ 多个属性：
div
{
width:100px;
height:100px;
background-color:red;
border:3px solid yellow;
transition:background-color 2s,border 2s,width 2s,height 2s；border:10px dotted black;    /*多属性建议使用 {transition:all 2s} */
}

div:hover
{
width:300px;
height:300px;
background-color:green;
border:10px dotted black;
}

• transition可以写在起始css中，也可以写在中点css中。
  • transition写在起始css中，效果覆盖起始→中点/中点→终止 的整个周期。
  • transition写在中点css中，效果只覆盖中点→终止。
• transition写在哪个标签，就表示过渡效果向谁进行，例如：

<div></div>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s;
    }
/*由div:hover中值状态返回div初始状态，width有2S的过渡；其他属性无过渡效果*/           
div:hover {
          width: 300px;
          background-color: green;
          transition: background-color 2s;
          }
/*由div初始状态——div:hover中值状态，过渡效果有width、background-color；其他属性无过渡效果*/

除非对返回过渡有特殊要求，否则一般将transition写在起始css中。