一、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;
}