# Transition:添加弹出过渡效果

# 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;
    • 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中。

posted @ 2018-09-22 18:57  深藍  阅读(1204)  评论(0编辑  收藏  举报