CSS3过渡/动画要点笔记

过渡

兼容

• -webkit- safrai

• -ms- 

• -moz- firefox

• -o- opera

步骤

• 设置出过渡效果

• 更改css值

• 语法：transition:过渡的css属性名称   过度时间  过渡的效果曲线  过渡效果何时开始

• 案列：

  .fade-enter-active,.fade-leave-active{

  transition: opacity .5s;

  }

  .fade-enter,.fade-leave-to{

  transition: opacity 0;

  }

• 属性全名：

  • transition 四个属性的简写

  • transition-property 属性名称

  • transition-duration 过渡时间 默认0

  • transition-timing-function 过渡时间的效果曲线 默认 ease

  • transition-delay 过渡开始时间 默认0

动画

步骤

• 规定动画名称

• 规定动画时常

  • 语法：animation: 名称 时长

  • 案列：animation:bounce-in .5s   表示名称为bounce-in的动画持续0.5秒 如果不过定动画效果就无效果因为时间默认为0.

兼容

• safari/chrome  -webkit-

• firfox -moz-

• 语法：@keyframes animationname {keyframes-selector {css-styles;}}   from to/0%-100%  为了获得最佳的浏览器支持 当用选择器0%-100%

• 案列

  • @keyframes bounce-in{

    0%{

    transform: scale(0);

    }

    50%{

    transform: scale(1.5);

    }

    100%{

    transform: scale(1);

    }

    }