vue css3动画

css3动画总结
1.过渡

transition: property duration timing-function delay;

property:需要过渡的属性,如果是全部则为all;

duration:过渡的时间取值,多少时间完成整个过渡效果

transition-timing-function:过渡效果的速度控制;
取值:
linear(匀速)
ease(先慢后快再慢)
ease-in (慢速开始)
ease-out(慢速结束)
ease-in-out(慢速开始和结束)

delay : 延迟效果,延迟多久开始动画

transition可操作实现各种各样的动画效果
它只是一个过渡效果,和animation(动画)是有区别的,animation可通过@keyframe控制区间的效果,transition则只能设置一次.
2.animation动画

div
{
animation:animation-name animation-duration animation-timing-function;
-webkit-animation:animation-name animation-duration animation-timing-function; /* Safari 和 Chrome */
}
@keyframes animation-name
{
0%   {}
25%  {}
50%  {}
75%  {}
100% {}
}

animation-name：规定需要绑定到选择器的 keyframe 名称。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。

3.vue组件跳转过渡动画

<template>
  <div id="app">
    <transition name="动画名字" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<style lang="scss">
#app {
}
."动画名字"-enter-active {
  animation: animation-name animation-duration animation-timing-function;
}
."动画名字"-leave-active {
  animation: animation-name animation-duration animation-timing-function;
}
@keyframes animation-name {
  0% {}
  50% {}
  100% {}
}
</style>

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。