transition 用法

 

 

一、animation有哪些属性值

animation-name 规则名称

animation-duration 动画时间

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

二、transition有哪些属性:

transition-property 对哪个属性设置过渡

transition-duration 过渡周期

transition-timing-function速度曲线

transition-delay 延迟时间

合写

transition: property duration timing-function delay;

设置多个属性用逗号

transition: width .2s linear .3s , height .2s linear .3s;

速度曲线有哪些

linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)

linear：规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1)

ease:慢速开始然后变快然后慢速结束

ease-in:慢速开始

ease-out:慢速结束

ease-in-out:慢速开始，慢速结束

cubic-bezier:自定义数值 可能的值在0到1之间 可以用浏览器调节速度曲线

怎么用transition实现一个hover按钮 环绕border效果：

原理：看见的都是假象

用两个div

其中一个设置border-bottom-color和border-left-color

另一个设置border-top-color和border-right-color

让宽高从零开始过渡 再设置过渡的时间延迟

捣鼓一下 时间差

代码：

/*按钮、输入框 环绕边框 动画效果*/

.test{

position: relative;

width: 100px;

height: 100px;

margin-left: 400px;

border: 1px solid red;

}

 

.test:before {

content: '';

display: block;

position: absolute;

box-sizing: border-box;

border: 1px solid transparent;

width: 0;

height: 0;

bottom: 0;

right: 0;

-webkit-transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;

transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;

}

/*hover和未hover都设置transition才能实现鼠标移出时有个原路返回的效果*/

.test:hover:before {

width: 100%;

height: 100%;

border-bottom-color: #367dff;

border-left-color: #367dff;

-webkit-transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;

transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;

}

.test:after {

content: '';

display: block;

position: absolute;

top: 0;

left: 0;

box-sizing: border-box;

border: 1px solid transparent;

width: 0;

height: 0;

-webkit-transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;

transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;

}

.test:hover:after {

width: 100%;

height: 100%;

border-top-color: #367dff;

border-right-color: #367dff;

-webkit-transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;

transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/zhangyonghan/p/11525788.html