CSS 样式过渡 transition

样式过渡transition

/*
transition : css属性 过渡时间 速率 何时开始;
*/
height: 200px;
transition : height 2s linear 1s; /* 会将高度从零开始,在2秒内慢慢变成200, linear匀速, 1s后开始过渡, 从而形成动画效果 */

/*属性 transition-property:
		all
		css属性(可用逗号分隔)
		none

过渡时间 transition-duration:
		以秒为单位  1s

速率 transition-timing-function:
				linear                           匀速；
               默认为ease                低速开始，然后加快，结束前慢；
               ease-in                        	低速开始；
               ease-out                      	低速结束；
               ease-in-out                  	低速开始和结束
              cubic-bezier(n,n,n,n)   			自定义

何时开始 transition-delay  :
		以秒为单位  1s
*/

.content .right-banner .rbanner:hover{
    
    
	box-shadow: 0px 0px 40px #181818;
	background-color: rgba(255,255,255,0.7);
	transform: translateY(-5px);
	transform: translateX(5px);
	transition: all 1s; /* all 是指该选择器中所有的css属性 */
}