css transition

css transition
 

  • 可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果
  • 过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0
  • 不是所有的CSS样式值都可以过渡,只有具有中间值的属性才具备过渡效果

语法 

  • transition
  • transition-property 属性
  • transition-duration 过渡持续时间
  • transition-function 过度时间函数
  • transition-delay    过度延迟时间

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition;1s 2s; /*代表持续时间为2s,延迟时间为默认值0s*/
}    
.test:hover{
    width: 500px;
}

 transition  时间过度函数

cubic-bezier()

 

  • ease  相当于cubic-bezier(0.25,0.1,0.25,1)
  • ease-in  相当于cubic-bezier(0.42,0.1,1,1)
  • ease-out  相当于cubic-bezier(0,0,0.58,1)
  • ease-in-out  相当于cubic-bezier(0.42,0,0.58,1)
  • linear  cubic-bezier(0,0,1,1)

steps()

  • step-start  相当于 steps(1,start)
  • step-end  相当于 steps(1,end) 

多值 

#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

过度方式

  • 过渡transition的触发有三种方式,分别是伪类触发、媒体查询触发和javascript触发
  • 过渡分为两个阶段:前进阶段和反向阶段
  • 过渡事件触发的次数与transition-property过渡属性的个数有关。过渡属性有几个就会触发几次
  • 如果过渡属性是复合属性  例如 border   则是4次触发
  • 如果过渡属性是默认值all,则过渡事件的次数是计算后的非复合的过渡属性的个数
  • 如果过渡延迟时间为负值,且绝对值大于等于过渡持续时间时,低版本webkit内核浏览器不会产生过渡效果,但会触发过渡事件;
  • 而其他浏览器即不会产生过渡效果,也不会触发过渡事件
  • 低版本webkit内核浏览器会出现bug,不仅复合属性被当作一个属性来触发事件,而且会多触发一次
     
/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px){
    .test{
        width: 500px;
    }
}
/*事件触发*/
test.onclick = function(){
    test.style.width = '300px';
    setTimeout(function(){
        test.style.width = '100px';
    },3000);
}

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值